From 7251bfc232f35e66dff2771c3350e3bb515e8434 Mon Sep 17 00:00:00 2001 From: Deyan Petrov <49752323+WickedInvi@users.noreply.github.com> Date: Fri, 5 Aug 2022 22:20:06 +0200 Subject: [PATCH 01/11] fix: grammatical errors --- src/docs/src/translation/en.json | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/docs/src/translation/en.json b/src/docs/src/translation/en.json index 474ce9d91a7..0635547a04f 100644 --- a/src/docs/src/translation/en.json +++ b/src/docs/src/translation/en.json @@ -156,7 +156,7 @@ "Or you can modify the component with Tailwind CSS utility classes": "Or you can modify the component with Tailwind CSS utility classes", "Customize daisyUI components": "Customize daisyUI components", "How to customize daisyUI": "How to customize daisyUI", - "daisyUI components comes with many variants necessary for design systems and you won't usually need to customize anything.": "daisyUI components comes with many variants necessary for design systems and you won't usually need to customize anything.", + "daisyUI components come with many variants necessary for design systems and you won't usually need to customize anything.": "daisyUI components come with many variants necessary for design systems and you won't usually need to customize anything.", "But you can still customize components in many ways.": "But you can still customize components in many ways.", "Let's say, you want to customize this button:": "Let's say, you want to customize this button:", "You can use daisyUI utility classes:": "You can use daisyUI utility classes:", @@ -177,7 +177,7 @@ "Read more about themes": "Read more about themes", "If it's true, a few base styles will be added": "If it's true, a few base styles will be added", "If it's true, responsive and utility classes will be added": "If it's true, responsive and utility classes will be added", - "If it's true, daisyUI shows logs in terminal while CSS is building": "If it's true, daisyUI shows logs in terminal while CSS is building", + "If it's true, daisyUI shows logs in the terminal while CSS is building": "If it's true, daisyUI shows logs in the terminal while CSS is building", "If it's true, your theme will be right-to-left. You need to add dir='rtl' to your body tag.": "If it's true, your theme will be right-to-left. You need to add dir='rtl' to your body tag.", "If you're using daisyUI with RTL option, I suggest using tailwindcss-flip plugin because to flip all your Tailwind utilities automatically.": "If you're using daisyUI with RTL option, I suggest using tailwindcss-flip plugin to flip all your Tailwind utilities automatically.", "Allows us to pick another theme for system's auto dark mode. By default, dark theme (or a custom theme named dark) will be the default theme if no theme is specified and the user is using dark mode on their system. With this config, you can set another theme to be the default dark mode theme.": "Allows us to pick another theme for system's auto dark mode. By default, dark theme (or a custom theme named dark) will be the default theme if no theme is specified and the user is using dark mode on their system. With this config, you can set another theme to be the default dark mode theme.", @@ -217,38 +217,38 @@ "How to remove unused themes?": "How to remove unused themes?", "You can only include the themes you want in your project.": "You can only include the themes you want in your project.", "This will reduce the size of your CSS file.": "This will reduce the size of your CSS file.", - "In below example": "In below example", + "In the below example": "In the below example", "cupcake will be the default theme for light mode": "cupcake will be the default theme for light mode", "dark will be the default theme for dark mode": "dark will be the default theme for dark mode", "cmyk can be applied on any HTML tag with data-theme='cmyk'": "cmyk can be applied on any HTML tag with data-theme='cmyk'", "How to disable all themes?": "How to disable all themes?", "If you only want the default light theme, set themes config to false.": "If you only want the default light theme, set themes config to false.", "If you don't want to include any themes and disable all colors, set themes config to an empty array.": "If you don't want to include any themes and disable all colors, set themes config to an empty array.", - "How to use a theme only for a section of page?": "How to use a theme only for a section of page?", + "How to use a theme only for a section of a page?": "How to use a theme only for a section of a page?", "Add data-theme='THEME_NAME' to any element and everything inside will have your theme.": "Add data-theme='THEME_NAME' to any element and everything inside will have your theme.", "You can nest themes and there is no limit!": "You can nest themes and there is no limit!", "You can force a section of your HTML to only use a specific theme.": "You can force a section of your HTML to only use a specific theme.", "How to add a new custom theme?": "How to add a new custom theme?", "You can add a new theme from tailwind.config.js file.": "You can add a new theme from tailwind.config.js file.", - "In below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.": "In below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.", + "In the below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.": "In the below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.", "The first theme (mytheme) will be the default theme.": "The first theme (mytheme) will be the default theme.", "dark theme will be the default theme for dark mode.": "dark theme will be the default theme for dark mode.", - "In below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).": "In below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).", + "In the below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).": "In the below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).", "CSS variables in daisyUI themes": "CSS variables in daisyUI themes", "There are a few optional CSS variables that you can use in daisyUI themes to customize design decisions for each theme:": "There are a few optional CSS variables that you can use in daisyUI themes to customize design decisions for each theme:", "Custom CSS for a daisyUI theme": "Custom CSS for a daisyUI theme", "You can apply custom style to a daisyUI themes using CSS:": "You can apply custom style to a daisyUI themes using CSS:", "How to customize an existing theme?": "How to customize an existing theme?", "In your tailwind.config.js, you can require an existing daisyUI theme and override some colors.": "In your tailwind.config.js, you can require an existing daisyUI theme and override some colors.", - "In below example, I require and spread light theme and change its primary and primary-focus colors:": "In below example, I require and spread light theme and change its primary and primary-focus colors:", + "In the below example, I require and spread light theme and change its primary and primary-focus colors:": "In the below example, I require and spread light theme and change its primary and primary-focus colors:", "Contribute to translation": "Contribute to translation", "Alert informs users about important events.": "Alert informs users about important events.", "Artboard provides fixed size container to display a demo content on mobile size.": "Artboard provides fixed size container to display a demo content on mobile size.", "Avatars are used to show a thumbnail representation of an individual or business in the interface.": "Avatars are used to show a thumbnail representation of an individual or business in the interface.", - "Badges are used to inform user of the status of specific data.": "Badges are used to inform user of the status of specific data.", + "Badges are used to inform the user of the status of specific data.": "Badges are used to inform the user of the status of specific data.", "Breadcrumbs helps users to navigate through the website.": "Breadcrumbs helps users to navigate through the website.", "Button group shows buttons next to each other.": "Button group shows buttons next to each other.", - "Buttons allows user to take actions or make choices.": "Buttons allows user to take actions or make choices.", + "Buttons allow the user to take actions or make choices.": "Buttons allow the user to take actions or make choices.", "Cards are used to group and display content in a way that is easily readable.": "Cards are used to group and display content in a way that is easily readable.", "Carousel show images or content in a scrollable area.": "Carousel show images or content in a scrollable area.", "Checkboxes are used to select or deselect a value.": "Checkboxes are used to select or deselect a value.", @@ -300,8 +300,8 @@ "daisyUI themes": "daisyUI themes", "How to use daisyUI themes?": "How to use daisyUI themes?", "daisyUI Theme Generator": "daisyUI Theme Generator", - "You can add your custom themes to tailwind.config.js file in daisyui > themes array. In this page, you can pick required color values and see how the components will look like with them.": "You can add your custom themes to tailwind.config.js file in daisyui > themes array. In this page, you can pick required color values and see how the components will look like with them.", - "You can also define optional colors to have more control on the color values (for example: the color of button when it's focused of the color of the text on a button)": "You can also define optional colors to have more control on the color values (for example: the color of button when it's focused of the color of the text on a button)", + "You can add your custom themes to tailwind.config.js file in daisyui > themes array. On this page, you can pick required color values and see how the components will look like with them.": "You can add your custom themes to tailwind.config.js file in daisyui > themes array. On this page, you can pick required color values and see how the components will look like with them.", + "You can also define optional colors to have more control on the color values (for example: the color of a button when it's focused on the color of the text on a button)": "You can also define optional colors to have more control on the color values (for example: the color of a button when it's focused on the color of the text on a button)", "Check out colors page to see all the color names you can use.": "Check out colors page to see all the color names you can use.", "Check out themes page to see all the CSS variables you can use to customize the design decision (example: border-radius, animations, etc.)": "Check out themes page to see all the CSS variables you can use to customize the design decision (example: border-radius, animations, etc.)", "Randomize": "Randomize", From 2b838d3d53ebb2b466d531c14f3570e6a265f5af Mon Sep 17 00:00:00 2001 From: Deyan Petrov Date: Sat, 6 Aug 2022 17:40:51 +0200 Subject: [PATCH 02/11] updated keys to match en.json --- src/docs/src/translation/es.json | 22 +++++++++++----------- src/docs/src/translation/id.json | 22 +++++++++++----------- src/docs/src/translation/jp.json | 22 +++++++++++----------- src/docs/src/translation/ko.json | 22 +++++++++++----------- src/docs/src/translation/zh_cn.json | 22 +++++++++++----------- src/docs/src/translation/zh_tw.json | 22 +++++++++++----------- 6 files changed, 66 insertions(+), 66 deletions(-) diff --git a/src/docs/src/translation/es.json b/src/docs/src/translation/es.json index fb96e23dbdf..198e1725818 100644 --- a/src/docs/src/translation/es.json +++ b/src/docs/src/translation/es.json @@ -156,7 +156,7 @@ "Or you can modify the component with Tailwind CSS utility classes": "O puede modificar el componente con las clases de utilidad de Tailwind CSS", "Customize daisyUI components": "Personalizar los componentes de daisyUI", "How to customize daisyUI": "Cómo personalizar daisyUI", - "daisyUI components comes with many variants necessary for design systems and you won't usually need to customize anything.": "Los componentes daisyUI vienen con muchas variantes necesarias para los sistemas de diseño y, por lo general, no necesitará personalizar nada.", + "daisyUI components come with many variants necessary for design systems and you won't usually need to customize anything.": "Los componentes daisyUI vienen con muchas variantes necesarias para los sistemas de diseño y, por lo general, no necesitará personalizar nada.", "But you can still customize components in many ways.": "Pero aún puede personalizar los componentes de muchas maneras.", "Let's say, you want to customize this button:": "Digamos que desea personalizar este botón:", "You can use daisyUI utility classes:": "Puede usar las clases de utilidad de daisyUI:", @@ -177,7 +177,7 @@ "Read more about themes": "Más información sobre temas", "If it's true, a few base styles will be added": "Si es true, se agregarán algunos estilos básicos", "If it's true, responsive and utility classes will be added": "Si es true, se agregarán clases de receptividad y de utilidad", - "If it's true, daisyUI shows logs in terminal while CSS is building": "Si es true, daisyUI muestra registros en la terminal mientras se construye el CSS", + "If it's true, daisyUI shows logs in the terminal while CSS is building": "Si es true, daisyUI muestra registros en la terminal mientras se construye el CSS", "If it's true, your theme will be right-to-left. You need to add dir='rtl' to your body tag.": "Si es true, su tema será de derecha a izquierda. Debe agregar dir='rtl' a su etiqueta de cuerpo.", "If you're using daisyUI with RTL option, I suggest using tailwindcss-flip plugin because to flip all your Tailwind utilities automatically.": "Si usa daisyUI con la opción RTL, sugiero usar el complemento tailwindcss-flip porque cambiará todas sus utilidades Tailwind automáticamente.", "Allows us to pick another theme for system's auto dark mode. By default, dark theme (or a custom theme named dark) will be the default theme if no theme is specified and the user is using dark mode on their system. With this config, you can set another theme to be the default dark mode theme.": "Nos permite elegir otro tema para el modo oscuro automático del sistema. De forma predeterminada, el tema dark (o un tema personalizado llamado dark) será el tema predeterminado si no se especifica ninguno y el usuario está usando el modo oscuro en su sistema. Con esta configuración, puede configurar otro tema para que sea el tema de modo oscuro predeterminado.", @@ -217,38 +217,38 @@ "How to remove unused themes?": "¿Cómo eliminar temas no utilizados?", "You can only include the themes you want in your project.": "Puede incluir solo los temas que desee en su proyecto.", "This will reduce the size of your CSS file.": "Esto reducirá el tamaño de su archivo CSS.", - "In below example": "En el siguiente ejemplo", + "In the below example": "En el siguiente ejemplo", "cupcake will be the default theme for light mode": "cupcake será el tema predeterminado para el modo claro", "dark will be the default theme for dark mode": "dark será el tema predeterminado para el modo oscuro", "cmyk can be applied on any HTML tag with data-theme='cmyk'": "cmyk se puede aplicar en cualquier etiqueta HTML con data-theme='cmyk'", "How to disable all themes?": "¿Cómo deshabilitar todos los temas?", "If you only want the default light theme, set themes config to false.": "Si solo desea el tema light predeterminado, establezca la configuración de themes en falso.", "If you don't want to include any themes and disable all colors, set themes config to an empty array.": "Si no desea incluir ningún tema y deshabilitar todos los colores, establezca la configuración de themes en una matriz vacía.", - "How to use a theme only for a section of page?": "¿Cómo usar un tema solo para una sección de la página?", + "How to use a theme only for a section of a page?": "¿Cómo usar un tema solo para una sección de la página?", "Add data-theme='THEME_NAME' to any element and everything inside will have your theme.": "Agregue data-theme='THEME_NAME' a cualquier elemento y todo lo que esté dentro tendrá su tema.", "You can nest themes and there is no limit!": "¡Puedes anidar temas y no hay límite!", "You can force a section of your HTML to only use a specific theme.": "Puede obligar a una sección de su HTML a usar solo un tema específico.", "How to add a new custom theme?": "¿Cómo agregar un nuevo tema personalizado?", "You can add a new theme from tailwind.config.js file.": "Puede agregar un nuevo tema en el archivo tailwind.config.js.", - "In below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.": "En el siguiente ejemplo, agregué un nuevo tema llamado mytheme y también incluyo los temas dark y cupcake.", + "In the below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.": "En el siguiente ejemplo, agregué un nuevo tema llamado mytheme y también incluyo los temas dark y cupcake.", "The first theme (mytheme) will be the default theme.": "El primer tema (mytheme) será el tema predeterminado.", "dark theme will be the default theme for dark mode.": "El tema dark será el tema predeterminado para el modo oscuro.", - "In below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).": "En el siguiente ejemplo, tengo los colores requeridos. Todos los demás colores se generarán automáticamente (como el color del botón cuando se enfoca en él o el color del texto en un botón principal).", + "In the below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).": "En el siguiente ejemplo, tengo los colores requeridos. Todos los demás colores se generarán automáticamente (como el color del botón cuando se enfoca en él o el color del texto en un botón principal).", "CSS variables in daisyUI themes": "Variables CSS en temas daisyUI", "There are a few optional CSS variables that you can use in daisyUI themes to customize design decisions for each theme:": "Hay algunas variables CSS opcionales que puede usar en los temas daisyUI para personalizar diseño de cada tema:", "Custom CSS for a daisyUI theme": "CSS personalizado para un tema daisyUI", "You can apply custom style to a daisyUI themes using CSS:": "Puede aplicar un estilo personalizado a un tema daisyUI usando CSS:", "How to customize an existing theme?": "¿Cómo personalizar un tema existente?", "In your tailwind.config.js, you can require an existing daisyUI theme and override some colors.": "En su tailwind.config.js, puede requerir un tema daisyUI existente y anular algunos colores.", - "In below example, I require and spread light theme and change its primary and primary-focus colors:": "En el siguiente ejemplo, requiero y extiendo el tema light y cambio sus colores primary y primary-focus:", + "In the below example, I require and spread light theme and change its primary and primary-focus colors:": "En el siguiente ejemplo, requiero y extiendo el tema light y cambio sus colores primary y primary-focus:", "Contribute to translation": "Contribuir a la traducción", "Alert informs users about important events.": "Alert informa a los usuarios sobre eventos importantes.", "Artboard provides fixed size container to display a demo content on mobile size.": "Artboard proporciona un contenedor de tamaño fijo para mostrar un contenido de demostración en tamaño móvil.", "Avatars are used to show a thumbnail representation of an individual or business in the interface.": "Avatars se utilizan para mostrar una representación en miniatura de una persona o empresa en la interfaz.", - "Badges are used to inform user of the status of specific data.": "Badges se utilizan para informar al usuario sobre el estado de datos específicos.", + "Badges are used to inform the user of the status of specific data.": "Badges se utilizan para informar al usuario sobre el estado de datos específicos.", "Breadcrumbs helps users to navigate through the website.": "Breadcrumbs ayudan a los usuarios a navegar por el sitio web.", "Button group shows buttons next to each other.": "Button group muestra los botones uno al lado del otro.", - "Buttons allows user to take actions or make choices.": "Buttons permiten al usuario realizar acciones o elegir opciones.", + "Buttons allows the user to take actions or make choices.": "Buttons permiten al usuario realizar acciones o elegir opciones.", "Cards are used to group and display content in a way that is easily readable.": "Cards se utilizan para agrupar y mostrar contenido de una manera que sea fácil de leer.", "Carousel show images or content in a scrollable area.": "Carousel muestra imágenes o contenido en un área desplazable.", "Checkboxes are used to select or deselect a value.": "Checkboxes se utilizan para seleccionar o anular la selección de un valor.", @@ -300,8 +300,8 @@ "daisyUI themes": "Temas de daisyUI", "How to use daisyUI themes?": "¿Cómo usar los temas de daisyUI?", "daisyUI Theme Generator": "Generador de temas de daisyUI", - "You can add your custom themes to tailwind.config.js file in daisyui > themes array. In this page, you can pick required color values and see how the components will look like with them.": "Puede agregar sus temas personalizados al archivo tailwind.config.js en la matriz daisyui > themes. En esta página, puede elegir los valores de color requeridos y ver cómo se verán los componentes con ellos.", - "You can also define optional colors to have more control on the color values (for example: the color of button when it's focused of the color of the text on a button)": "También puede definir colores opcionales para tener más control sobre los valores de color (por ejemplo: el color del botón cuando está enfocado del color del texto en un botón)", + "You can add your custom themes to tailwind.config.js file in daisyui > themes array. On this page, you can pick required color values and see how the components will look like with them.": "Puede agregar sus temas personalizados al archivo tailwind.config.js en la matriz daisyui > themes. En esta página, puede elegir los valores de color requeridos y ver cómo se verán los componentes con ellos.", + "You can also define optional colors to have more control on the color values (for example: the color of a button when it's focused on the color of the text on a button)": "También puede definir colores opcionales para tener más control sobre los valores de color (por ejemplo: el color del botón cuando está enfocado del color del texto en un botón)", "Check out colors page to see all the color names you can use.": "Consulta la página de colores para ver todos los nombres de colores que puedes usar.", "Check out themes page to see all the CSS variables you can use to customize the design decision (example: border-radius, animations, etc.)": "Consulta la página de temas para ver todas las variables CSS que puedes usar para personalizar la decisión de diseño (ejemplo: border-radius, animaciones , etc)", "Randomize": "Aleatorizar", diff --git a/src/docs/src/translation/id.json b/src/docs/src/translation/id.json index 83422084906..56e566f26a6 100644 --- a/src/docs/src/translation/id.json +++ b/src/docs/src/translation/id.json @@ -156,7 +156,7 @@ "Or you can modify the component with Tailwind CSS utility classes": "Atau Anda bisa memodifikasi komponen di dalam utility class Tailwind CSS", "Customize daisyUI components": "Kustomisasi komponen daisyUI", "How to customize daisyUI": "Cara mengkustomisasi daisyUI", - "daisyUI components comes with many variants necessary for design systems and you won't usually need to customize anything.": "Komponen daisyUI datang dengan beberapa varian yang diperlukan untuk sebuah design system dan Anda biasanya tidak perlu mengkustomisasi apapun.", + "daisyUI components come with many variants necessary for design systems and you won't usually need to customize anything.": "Komponen daisyUI datang dengan beberapa varian yang diperlukan untuk sebuah design system dan Anda biasanya tidak perlu mengkustomisasi apapun.", "But you can still customize components in many ways.": "Tapi Anda tetap bisa mengkustomisasi komponen-komponen tersebut dengan berbagai macam cara.", "Let's say, you want to customize this button:": "Katakanlah, Anda ingin mengkustomisasi tombol ini:", "You can use daisyUI utility classes:": "Anda bisa menggunakan utility class dari daisyUI:", @@ -177,7 +177,7 @@ "Read more about themes": "Baca selengkapnya tentang tema", "If it's true, a few base styles will be added": "Jika nilainya true, hanya beberapa style basis akan ditambahkan", "If it's true, responsive and utility classes will be added": "Jika nilainya true, class responsive dan utility akan ditambahkan", - "If it's true, daisyUI shows logs in terminal while CSS is building": "Jika nilainya true, daisyUI akan menampilkan log pada terminal ketika CSS sedang dibangun", + "If it's true, daisyUI shows logs in the terminal while CSS is building": "Jika nilainya true, daisyUI akan menampilkan log pada terminal ketika CSS sedang dibangun", "If it's true, your theme will be right-to-left. You need to add dir='rtl' to your body tag.": "Jika nilainya true, tema Anda akan menjadi kanan-ke-kiri. Anda harus menambahkan dir='rtl' ke tag body Anda.", "If you're using daisyUI with RTL option, I suggest using tailwindcss-flip plugin because to flip all your Tailwind utilities automatically.": "Jika Anda menggunakan daisyUI dengan opsi RTL, Saya merekomendasikan untuk menggunakan plugin tailwindcss-flip untuk membalik semua utility Tailwind Anda secara otomatis.", "Allows us to pick another theme for system's auto dark mode. By default, dark theme (or a custom theme named dark) will be the default theme if no theme is specified and the user is using dark mode on their system. With this config, you can set another theme to be the default dark mode theme.": "Mengizinkan kami untuk menggunakan tema lain selain mode gelap sistem. Secara bawaan, mode dark (atau tema kustom yang bernamakan dark) akan digunakan sebagai tema bawaan jika tidak ada tema buatan yang dispesifikasikan dan pengguna menggunakan mode gelap pada sistemnya. Dengan konfigurasi ini, Anda bisa mengatur tema lain menjadi tema gelap utama.", @@ -217,23 +217,23 @@ "How to remove unused themes?": "Bagaimana cara menghapus tema yang tidak diperlukan?", "You can only include the themes you want in your project.": "Anda bisa mengatur tema yang Anda inginkan untuk proyek Anda.", "This will reduce the size of your CSS file.": "Hal ini akan mengurangi ukuran file CSS Anda.", - "In below example": "Berikut ini adalah contoh", + "In the below example": "Berikut ini adalah contoh", "cupcake will be the default theme for light mode": "cupcake akan menjadi tema utama", "dark will be the default theme for dark mode": "dark akan menjadi tema utama untuk mode gelap", "cmyk can be applied on any HTML tag with data-theme='cmyk'": "cmyk bisa diaplikasikan ke tag HTML apapun menggunakan data-theme='cmyk'", "How to disable all themes?": "Bagaimana cara menonaktifkan semua tema?", "If you only want the default light theme, set themes config to false.": "Jika Anda hanya ingin tema utama light, atur konfigurasi themes ke false.", "If you don't want to include any themes and disable all colors, set themes config to an empty array.": "Jika Anda tidak ingin menambahkan tema apapun dan menonaktifkan semua warna, atur konfigurasi themes menjadi array kosong.", - "How to use a theme only for a section of page?": "Bagaimana cara menggunakan tema untuk sebagian halaman?", + "How to use a theme only for a section of a page?": "Bagaimana cara menggunakan tema untuk sebagian halaman?", "Add data-theme='THEME_NAME' to any element and everything inside will have your theme.": "Tambahkan data-theme='NAMA_TEMA' ke elemen apapun dan seluruh elemen didalamnya akan memiliki tema yang telah Anda pilih.", "You can nest themes and there is no limit!": "Anda dapat menerapkan beberapa tema secara bersarang tanpa batas!", "You can force a section of your HTML to only use a specific theme.": "Anda bisa memaksa sebuah section dari HTML Anda untuk menggunakan sebuah tema secara spesifik.", "How to add a new custom theme?": "Bagaimana cara menambahkan tema baru?", "You can add a new theme from tailwind.config.js file.": "Anda dapat menambahkan tema baru dari file tailwind.config.js.", - "In below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.": "Contoh di bawah, Saya menambahkan tema bernama mytheme, Saya juga akan menambahkan tema dark dan cupcake.", + "In the below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.": "Contoh di bawah, Saya menambahkan tema bernama mytheme, Saya juga akan menambahkan tema dark dan cupcake.", "The first theme (mytheme) will be the default theme.": "Tema pertama (mytheme) akan menjadi tema utama.", "dark theme will be the default theme for dark mode.": "Tema dark akan menjadi tema utama untuk model gelap.", - "In below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).": "Pada contoh di bawah, Saya memiliki seluruh warna yang dibutuhkan. Semua warna lain akan dibuat secara otomatis (Seperti warna dari tombol ketika Anda memfokuskan tombolnya, atau ketika warna teks dari tombol primary).", + "In the below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).": "Pada contoh di bawah, Saya memiliki seluruh warna yang dibutuhkan. Semua warna lain akan dibuat secara otomatis (Seperti warna dari tombol ketika Anda memfokuskan tombolnya, atau ketika warna teks dari tombol primary).", "CSS variables in daisyUI themes": "Variabel CSS pada tema daisyUI", "There are a few optional CSS variables that you can use in daisyUI themes to customize design decisions for each theme:": "Ada beberapa variabel CSS opsional yang bisa dipakai untuk mengkustomisasi desain Anda untuk setiap tema:", "You can also add optional color names to have full control over all colors.": "Anda juga bisa menambahkan nama warna opsional untuk mendapatkan kontrol penuh atas seluruh warna.", @@ -241,15 +241,15 @@ "You can apply custom style to a daisyUI themes using CSS:": "Anda dapat mengaplikasikan style kustom kepada tema daisyUI menggunakan CSS:", "How to customize an existing theme?": "Bagaimana cara mengkustomisasi tema yang sudah ada?", "In your tailwind.config.js, you can require an existing daisyUI theme and override some colors.": "Pada tailwind.config.js, Anda dapat menambahkan tema daisyUI yang sudah ada dan mengesampingkan beberapa warna.", - "In below example, I require and spread light theme and change its primary and primary-focus colors:": "Pada contoh di bawah, Saya mengambil dan menyebarkan tema light dan mengubah warna primary dan primary-focus:", + "In the below example, I require and spread light theme and change its primary and primary-focus colors:": "Pada contoh di bawah, Saya mengambil dan menyebarkan tema light dan mengubah warna primary dan primary-focus:", "Contribute to translation": "Kontribusi penerjemahan", "Alert informs users about important events.": "Alert menginformasikan pengguna tentang kejadian penting.", "Artboard provides fixed size container to display a demo content on mobile size.": "Artboard menyediakan kontainer berukuran tetap untuk menampilkan sebuah konten demo dalam ukuran mobile.", "Avatars are used to show a thumbnail representation of an individual or business in the interface.": "Avatars are used to show a thumbnail representation of an individual or business in the interface.", - "Badges are used to inform user of the status of specific data.": "Badge digunakan untuk menginformasikan pengguna tentang status sebuah data secara spesifik.", + "Badges are used to inform the user of the status of specific data.": "Badge digunakan untuk menginformasikan pengguna tentang status sebuah data secara spesifik.", "Breadcrumbs helps users to navigate through the website.": "Breadcrumb membantu pengguna untuk menavigasi melalui situs web.", "Button group shows buttons next to each other.": "Button group menampilkan tombol-tombol yang saling berdampingan.", - "Buttons allows user to take actions or make choices.": "Button mengizinkan pengguna untuk melakukan sebuah aksi atau membuat keputusan.", + "Buttons allows the user to take actions or make choices.": "Button mengizinkan pengguna untuk melakukan sebuah aksi atau membuat keputusan.", "Cards are used to group and display content in a way that is easily readable.": "Card digunakan untuk mengkelompokan dan menyajikan konten sehingga bisa dibaca dengan mudah.", "Carousel show images or content in a scrollable area.": "Carousel menyajikan gambar-gambar atau konten dalam area yang bisa digeser.", "Checkboxes are used to select or deselect a value.": "Checkbox digunakan untuk memilih atau tidak memilih sebuah nilai.", @@ -301,8 +301,8 @@ "daisyUI themes": "Tema daisyUI", "How to use daisyUI themes?": "Bagaimana cara menggunakan tema daisyUI?", "daisyUI Theme Generator": "Generator tema daisyUI", - "You can add your custom themes to tailwind.config.js file in daisyui > themes array. In this page, you can pick required color values and see how the components will look like with them.": "Anda dapat menambahkan tema kustom Anda ke dalam file tailwind.config.js di array daisyui > themes. Pada halaman ini, Anda akan memilih nilai warna yang dibutuhkan dan melihat bagaimana komponen akan terlihat ketika warna diterapkan.", - "You can also define optional colors to have more control on the color values (for example: the color of button when it's focused of the color of the text on a button)": "Anda juga bisa mendifinisikan warna opsional untuk mendapatkan kontrol lebih terhadap nilai warna (contoh: warna teks dari tombol sedang dalam fokus).", + "You can add your custom themes to tailwind.config.js file in daisyui > themes array. On this page, you can pick required color values and see how the components will look like with them.": "Anda dapat menambahkan tema kustom Anda ke dalam file tailwind.config.js di array daisyui > themes. Pada halaman ini, Anda akan memilih nilai warna yang dibutuhkan dan melihat bagaimana komponen akan terlihat ketika warna diterapkan.", + "You can also define optional colors to have more control on the color values (for example: the color of a button when it's focused on the color of the text on a button)": "Anda juga bisa mendifinisikan warna opsional untuk mendapatkan kontrol lebih terhadap nilai warna (contoh: warna teks dari tombol sedang dalam fokus).", "Check out colors page to see all the color names you can use.": "Lihat halaman warna untuk melihat seluruh nama warna yang bisa Anda gunakan.", "Check out themes page to see all the CSS variables you can use to customize the design decision (example: border-radius, animations, etc.)": "Lihat halaman tema untuk melihat semua variabel CSS yang bisa Anda gunakan untuk desain (contoh: border-radius, animations, dll.)", "Randomize": "Acak", diff --git a/src/docs/src/translation/jp.json b/src/docs/src/translation/jp.json index b6fe6bb9e56..d4fe9e3f54d 100644 --- a/src/docs/src/translation/jp.json +++ b/src/docs/src/translation/jp.json @@ -156,7 +156,7 @@ "Or you can modify the component with Tailwind CSS utility classes": "または、TailwindCSSユーティリティクラスを使用してコンポーネントを変更できます", "Customize daisyUI components": "daisyUI コンポーネントをカスタマイズする", "How to customize daisyUI": "daisyUI をカスタマイズする方法", - "daisyUI components comes with many variants necessary for design systems and you won't usually need to customize anything.": "daisyUI コンポーネントには、設計システムに必要な多くのバリエーションが付属しており、通常は何もカスタマイズする必要はありません。", + "daisyUI components come with many variants necessary for design systems and you won't usually need to customize anything.": "daisyUI コンポーネントには、設計システムに必要な多くのバリエーションが付属しており、通常は何もカスタマイズする必要はありません。", "But you can still customize components in many ways.": "ただし、コンポーネントはさまざまな方法でカスタマイズできます。", "Let's say, you want to customize this button:": "このボタンをカスタマイズするとします:", "You can use daisyUI utility classes:": "daisyUI ユーティリティクラスを使用できます:", @@ -177,7 +177,7 @@ "Read more about themes": "テーマについてもっと読む", "If it's true, a few base styles will be added": "trueの場合、いくつかの基本スタイルが追加されます", "If it's true, responsive and utility classes will be added": "trueの場合、レスポンシブクラスとユーティリティクラスが追加されます", - "If it's true, daisyUI shows logs in terminal while CSS is building": "trueの場合、daisyUI はターミナルにログを表示します", + "If it's true, daisyUI shows logs in the terminal while CSS is building": "trueの場合、daisyUI はターミナルにログを表示します", "If it's true, your theme will be right-to-left. You need to add dir='rtl' to your body tag.": "trueの場合、あなたのテーマは右から左になります。 bodyタグにdir='rtl'を追加する必要があります。", "If you're using daisyUI with RTL option, I suggest using tailwindcss-flip plugin because to flip all your Tailwind utilities automatically.": "daisyUI を使用している場合は、すべてのTailwindユーティリティを自動的に反転させるため、tailwindcss-flip プラグインを使用することをお勧めします。", "Allows us to pick another theme for system's auto dark mode. By default, dark theme (or a custom theme named dark) will be the default theme if no theme is specified and the user is using dark mode on their system. With this config, you can set another theme to be the default dark mode theme.": "システムのオートダークモードの別のテーマを選択できます。デフォルトでは、テーマが指定されておらず、ユーザーがシステムでダークモードを使用している場合、darkテーマ（またはdarkという名前のカスタムテーマ）がデフォルトのテーマになります。この構成を使用すると、別のテーマをデフォルトのダークモードテーマに設定できます。", @@ -217,38 +217,38 @@ "How to remove unused themes?": "使用しないテーマを無効化する方法", "You can only include the themes you want in your project.": "あなたはプロジェクトに使用したいテーマだけを含めることもできます。", "This will reduce the size of your CSS file.": "これはCSSファイルのサイズを削減することができます。", - "In below example": "以下の例では:", + "In the below example": "以下の例では:", "cupcake will be the default theme for light mode": "cupcakeがライトモードのデフォルトテーマになります:", "dark will be the default theme for dark mode": "darkがダークモードのデフォルトテーマになります:", "cmyk can be applied on any HTML tag with data-theme='cmyk'": "data-theme='cmyk'を使用して、任意のHTMLタグにcmykを適用できます:", "How to disable all themes?": "すべてのテーマを無効化する方法", "If you only want the default light theme, set themes config to false.": "もしデフォルトのlightテーマを使用したいなら、themesをfalseに設定してください。", "If you don't want to include any themes and disable all colors, set themes config to an empty array.": "もしすべてのテーマと色を無効化したい場合、themesに空の配列を渡してください。", - "How to use a theme only for a section of page?": "ページの一部でのみテーマを使用する方法", + "How to use a theme only for a section of a page?": "ページの一部でのみテーマを使用する方法", "Add data-theme='THEME_NAME' to any element and everything inside will have your theme.": "data-theme='THEME_NAME'を要素に追加することで、要素内のすべてにテーマを反映させることができます。", "You can nest themes and there is no limit!": "テーマは無限に入れ子にすることができます!", "You can force a section of your HTML to only use a specific theme.": "HTMLの一部に特定のテーマのみを使用するように強制することができます。", "How to add a new custom theme?": "新しくカスタマイズされたテーマを追加する方法", "You can add a new theme from tailwind.config.js file.": "tailwind.config.jsファイルにから新しいテーマを追加することができます。", - "In below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.": "下の例では、mythemeという新しいテーマとdarkテーマ、cupcakeテーマを追加しています。", + "In the below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.": "下の例では、mythemeという新しいテーマとdarkテーマ、cupcakeテーマを追加しています。", "The first theme (mytheme) will be the default theme.": "最初のテーマ(mytheme)がデフォルトテーマになります。", "dark theme will be the default theme for dark mode.": "darkテーマは、ダークモードのデフォルトテーマになります。", - "In below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).": "", + "In the below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).": "", "CSS variables in daisyUI themes": "daisyUIテーマでのCSS変数", "There are a few optional CSS variables that you can use in daisyUI themes to customize design decisions for each theme:": "daisyUIでは、いくつかの任意なCSS変数を使用して、テーマごとのデザイン設定をカスタマイズすることができます。", "Custom CSS for a daisyUI theme": "daisyUIのテーマにカスタマイズされたCSSを使用する", "You can apply custom style to a daisyUI themes using CSS:": "CSSを使用して、カスタムスタイルをdaisyUIのテーマに適用することができます。", "How to customize an existing theme?": "既存のテーマをカスタマイズする方法", "In your tailwind.config.js, you can require an existing daisyUI theme and override some colors.": "tailwind.config.jsで、既存のdaisyUIテーマの色を上書きすることができます。", - "In below example, I require and spread light theme and change its primary and primary-focus colors:": "以下の例は、lightテーマを要求し、primaryとprimary-focusの色を変更しています:", + "In the below example, I require and spread light theme and change its primary and primary-focus colors:": "以下の例は、lightテーマを要求し、primaryとprimary-focusの色を変更しています:", "Contribute to translation": "翻訳に貢献する", "Alert informs users about important events.": "アラートは、重要なイベントについてユーザーに通知します。", "Artboard provides fixed size container to display a demo content on mobile size.": "Artboardは、モバイルサイズでデモコンテンツを表示するための固定サイズのコンテナを提供します。", "Avatars are used to show a thumbnail representation of an individual or business in the interface.": "アバターは、インターフェースに個人または企業のサムネイル表現を表示するために使用されます。", - "Badges are used to inform user of the status of specific data.": "バッジは、特定のデータのステータスをユーザーに通知するために使用されます。", + "Badges are used to inform the user of the status of specific data.": "バッジは、特定のデータのステータスをユーザーに通知するために使用されます。", "Breadcrumbs helps users to navigate through the website.": "ブレッドクラムは、ユーザーがWebサイトをナビゲートするのに役立ちます。", "Button group shows buttons next to each other.": "ボタングループには、ボタンが隣り合って表示されます。", - "Buttons allows user to take actions or make choices.": "ボタンを使用すると、ユーザーはアクションを実行したり、選択したりできます。", + "Buttons allows the user to take actions or make choices.": "ボタンを使用すると、ユーザーはアクションを実行したり、選択したりできます。", "Cards are used to group and display content in a way that is easily readable.": "カードは、読みやすい方法でコンテンツをグループ化して表示するために使用されます。", "Carousel show images or content in a scrollable area.": "カルーセルは、スクロール可能な領域に画像またはコンテンツを表示します。", "Checkboxes are used to select or deselect a value.": "チェックボックスは、値を選択または選択解除するために使用されます。", @@ -300,8 +300,8 @@ "daisyUI themes": "daisyUI テーマ", "How to use daisyUI themes?": "daisyUI テーマを使用するには?", "daisyUI Theme Generator": "daisyUI テーマ ジェネレーター", - "You can add your custom themes to tailwind.config.js file in daisyui > themes array. In this page, you can pick required color values and see how the components will look like with them.": "You can add your custom themes to tailwind.config.js file in daisyui > themes array. In this page, you can pick required color values and see how the components will look like with them.", - "You can also define optional colors to have more control on the color values (for example: the color of button when it's focused of the color of the text on a button)": "You can also define optional colors to have more control on the color values (for example: the color of button when it's focused of the color of the text on a button)", + "You can add your custom themes to tailwind.config.js file in daisyui > themes array. On this page, you can pick required color values and see how the components will look like with them.": "You can add your custom themes to tailwind.config.js file in daisyui > themes array. On this page, you can pick required color values and see how the components will look like with them.", + "You can also define optional colors to have more control on the color values (for example: the color of a button when it's focused on the color of the text on a button)": "You can also define optional colors to have more control on the color values (for example: the color of a button when it's focused on the color of the text on a button)", "Check out colors page to see all the color names you can use.": "Check out colors page to see all the color names you can use.", "Check out themes page to see all the CSS variables you can use to customize the design decision (example: border-radius, animations, etc.)": "Check out themes page to see all the CSS variables you can use to customize the design decision (example: border-radius, animations, etc.)", "Randomize": "Randomize", diff --git a/src/docs/src/translation/ko.json b/src/docs/src/translation/ko.json index d4a320b1d52..dcd0b05879e 100644 --- a/src/docs/src/translation/ko.json +++ b/src/docs/src/translation/ko.json @@ -156,7 +156,7 @@ "Or you can modify the component with Tailwind CSS utility classes": "Tailwind CSS 유틸리티 클래스를 이용해서 컴포넌트를 수정할 수도 있습니다.", "Customize daisyUI components": "데이지UI 컴포넌트 커스터마이징하기", "How to customize daisyUI": "데이지UI를 커스터마이징하는 방법", - "daisyUI components comes with many variants necessary for design systems and you won't usually need to customize anything.": "데이지UI 디자인 시스템에 필요한 다양한 유형의 컴포넌트를 제공하며, 일반적으로 어떤 것도 커스터마이징 할 필요가 없습니다.", + "daisyUI components come with many variants necessary for design systems and you won't usually need to customize anything.": "데이지UI 디자인 시스템에 필요한 다양한 유형의 컴포넌트를 제공하며, 일반적으로 어떤 것도 커스터마이징 할 필요가 없습니다.", "But you can still customize components in many ways.": "하지만 여전히 여러 방법으로 컴포넌트를 커스터마이징 할 수 있습니다.", "Let's say, you want to customize this button:": "이 버튼을 커스터마이징 하고 싶다면:", "You can use daisyUI utility classes:": "데이지UI 유틸리티 클래스를 사용해 커스터마이징 할 수 있습니다:", @@ -177,7 +177,7 @@ "Read more about themes": "테마에 대해 더 읽어보세요.", "If it's true, a few base styles will be added": "이 값이 true라면, 소수의 기본 스타일이 추가됩니다.", "If it's true, responsive and utility classes will be added": "이 값이 true라면, 반응형 및 유틸리티 클래스가 추가됩니다.", - "If it's true, daisyUI shows logs in terminal while CSS is building": "이 값이 true라면, CSS가 빌드되는 동안 터미널에 로그가 표시됩니다.", + "If it's true, daisyUI shows logs in the terminal while CSS is building": "이 값이 true라면, CSS가 빌드되는 동안 터미널에 로그가 표시됩니다.", "If it's true, your theme will be right-to-left. You need to add dir='rtl' to your body tag.": "이 값이 true라면, 테마의 방향은 오른쪽에서 왼쪽이 됩니다. body 태그에 dir='rtl'를 추가해야 합니다.", "If you're using daisyUI with RTL option, I suggest using tailwindcss-flip plugin because to flip all your Tailwind utilities automatically.": "데이지UI를 RTL 옵션으로 이용하신다면, tailwindcss-flip 플러그인을 사용하는 것을 추천드립니다. Tailwind 유틸리티를 자동으로 좌우 반전시켜줍니다.", "Allows us to pick another theme for system's auto dark mode. By default, dark theme (or a custom theme named dark) will be the default theme if no theme is specified and the user is using dark mode on their system. With this config, you can set another theme to be the default dark mode theme.": "이 설정은 시스템의 자동 다크 테마를 위해서 다른 테마를 고를 수 있게 합니다. 기본적으로 사용자가 테마를 지정하지 않고 시스템에서 다크 테마를 사용하고 있다면 dark 테마 (혹은 dark라는 이름을 가진 커스텀 테마)가 기본 테마가 될 것입니다. 이 설정으로 다른 테마를 기본 다크 모드 테마로 설정할 수 있습니다.", @@ -217,38 +217,38 @@ "How to remove unused themes?": "사용하지 않는 테마들은 어떻게 삭제하나요?", "You can only include the themes you want in your project.": "오직 당신의 프로젝트에 사용할 테마만을 포함시킵니다.", "This will reduce the size of your CSS file.": "이는 CSS 파일 크기를 줄여줍니다.", - "In below example": "아래 예시에서", + "In the below example": "아래 예시에서", "cupcake will be the default theme for light mode": "cupcake은 라이트 모드의 기본 테마가 될 것 입니다", "dark will be the default theme for dark mode": "dark은 다크모드의 기본 테마가 될 것 입니다", "cmyk can be applied on any HTML tag with data-theme='cmyk'": "cmyk 는 data-theme='cmyk'와 함께 어떤 HTML 태그에도 적용될 수 있습니다.", "How to disable all themes?": "테마를 사용하지 않으려면 어떻게 하나요?", "If you only want the default light theme, set themes config to false.": "오직 기본 light 테마만 사용하고 싶으시면, themes 설정값을 false로 바꾸시면 됩니다.", "If you don't want to include any themes and disable all colors, set themes config to an empty array.": "어떤 테마나 색상도 사용하고 싶지 않으시면, themes 설정값을 빈 배열로 놔두세요.", - "How to use a theme only for a section of page?": "특정 부분에서만 테마를 사용하려면 어떻게 하나요?", + "How to use a theme only for a section of a page?": "특정 부분에서만 테마를 사용하려면 어떻게 하나요?", "Add data-theme='THEME_NAME' to any element and everything inside will have your theme.": "data-theme='THEME_NAME' 를 요소에 추가하면 그 안에 있는 모든 것에 이 테마가 적용될 것입니다.", "You can nest themes and there is no limit!": "테마를 제한없이 계속 중첩할 수 있습니다!", "You can force a section of your HTML to only use a specific theme.": "HTML의 어떤 부분이 오직 특정한 테마만을 사용하도록 강제할 수 있습니다.", "How to add a new custom theme?": "새로운 커스텀 테마는 어떻게 추가하나요?", "You can add a new theme from tailwind.config.js file.": "새 테마는 tailwind.config.js 파일을 통해 추가할 수 있습니다.", - "In below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.": "아래 예시에서, mytheme라고 하는 새로운 테마를 추가하였고, dark 와 cupcake 테마도 포함하였습니다.", + "In the below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.": "아래 예시에서, mytheme라고 하는 새로운 테마를 추가하였고, dark 와 cupcake 테마도 포함하였습니다.", "The first theme (mytheme) will be the default theme.": "첫번째 테마(mytheme)가 기본 테마가 될 것입니다.", "dark theme will be the default theme for dark mode.": "다크 모드의 기본 테마는 dark 테마가 될 것입니다.", - "In below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).": "아래 예시를 보시면, 필수 색상들을 정의해 놓았습니다. 다른 색상들은 자동으로 생성될 것 입니다. (포커싱된 버튼의 색상이나 primary 버튼 위에 있는 텍스트 색상 등과 같은 다른 색상들이요).", + "In the below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).": "아래 예시를 보시면, 필수 색상들을 정의해 놓았습니다. 다른 색상들은 자동으로 생성될 것 입니다. (포커싱된 버튼의 색상이나 primary 버튼 위에 있는 텍스트 색상 등과 같은 다른 색상들이요).", "CSS variables in daisyUI themes": "데이지UI 테마의 CSS 변수들", "There are a few optional CSS variables that you can use in daisyUI themes to customize design decisions for each theme:": "데이지UI 테마에서 매 디자인 결정들을 커스텀할 수 있는 몇몇 선택적인 CSS 변수들이 있습니다.", "Custom CSS for a daisyUI theme": "데이지UI 테마의 CSS 커스터마이징하기", "You can apply custom style to a daisyUI themes using CSS:": "CSS를 이용해 커스터마이징한 스타일을 데이지UI 테마에 적용할 수 있습니다.", "How to customize an existing theme?": "기존에 있는 테마는 어떻게 커스터마이징 하나요?", "In your tailwind.config.js, you can require an existing daisyUI theme and override some colors.": "tailwind.config.js에서, 기존에 존재하는 데이지UI 테마를 require하고 색상값을 덮어쓰기할 수 있습니다.", - "In below example, I require and spread light theme and change its primary and primary-focus colors:": "아래 예시에서, light 테마를 require 및 전개하였고 primary와 primary-focus 색상을 변경하였습니다:", + "In the below example, I require and spread light theme and change its primary and primary-focus colors:": "아래 예시에서, light 테마를 require 및 전개하였고 primary와 primary-focus 색상을 변경하였습니다:", "Contribute to translation": "번역에 기여하기", "Alert informs users about important events.": "주의는 중요한 이벤트를 사용자에게 알려줍니다.", "Artboard provides fixed size container to display a demo content on mobile size.": "아트보드는 모바일 크기에서 데모 콘텐츠를 표시할 수 있는 고정 크기 컨테이너를 제공합니다.", "Avatars are used to show a thumbnail representation of an individual or business in the interface.": "아바타는 인터페이스에서 개인이나 기업을 대표하는 썸네일을 보여주는 데 사용됩니다.", - "Badges are used to inform user of the status of specific data.": "뱃지는 사용자에게 특정 데이터의 상태를 알리는 데 사용됩니다.", + "Badges are used to inform the user of the status of specific data.": "뱃지는 사용자에게 특정 데이터의 상태를 알리는 데 사용됩니다.", "Breadcrumbs helps users to navigate through the website.": "위치 표시는 사용자들이 웹사이트를 탐색하는 것을 돕습니다.", "Button group shows buttons next to each other.": "버튼 그룹은 나란히 있는 버튼들을 보여줍니다.", - "Buttons allows user to take actions or make choices.": "버튼은 사용자들이 어떤 작업을 수행하거나 원하는 것을 선택할 수 있도록 합니다.", + "Buttons allows the user to take actions or make choices.": "버튼은 사용자들이 어떤 작업을 수행하거나 원하는 것을 선택할 수 있도록 합니다.", "Cards are used to group and display content in a way that is easily readable.": "카드는 쉽게 읽을 수 있는 방식으로 콘텐츠를 그룹화하고 표시하는 데 사용됩니다.", "Carousel show images or content in a scrollable area.": "캐러셀은 스크롤 가능한 영역에 이미지 또는 콘텐츠를 표시합니다.", "Checkboxes are used to select or deselect a value.": "체크박스는 값을 선택하거나 선택을 취소하는 데 사용됩니다.", @@ -300,8 +300,8 @@ "daisyUI themes": "데이지UI 테마", "How to use daisyUI themes?": "데이지UI 테마를 어떻게 사용하나요?", "daisyUI Theme Generator": "데이지UI 테마 생성기", - "You can add your custom themes to tailwind.config.js file in daisyui > themes array. In this page, you can pick required color values and see how the components will look like with them.": "tailwind.config.js 파일의 daisyui > themes 배열 안에 당신이 커스터마이징한 테마를 추가할 수 있습니다. 이 페이지에서, 필수 색상값을 선택할 수 있고 컴포넌트가 어떻게 보일지 확인할 수 있습니다.", - "You can also define optional colors to have more control on the color values (for example: the color of button when it's focused of the color of the text on a button)": "선택적인 색상들을 정의해서 색상 값들에 더 많은 제어를 할 수 있습니다(예: 버튼의 텍스트 색상에 초점이 맞춰졌을 때 버튼 색상)", + "You can add your custom themes to tailwind.config.js file in daisyui > themes array. On this page, you can pick required color values and see how the components will look like with them.": "tailwind.config.js 파일의 daisyui > themes 배열 안에 당신이 커스터마이징한 테마를 추가할 수 있습니다. 이 페이지에서, 필수 색상값을 선택할 수 있고 컴포넌트가 어떻게 보일지 확인할 수 있습니다.", + "You can also define optional colors to have more control on the color values (for example: the color of a button when it's focused on the color of the text on a button)": "선택적인 색상들을 정의해서 색상 값들에 더 많은 제어를 할 수 있습니다(예: 버튼의 텍스트 색상에 초점이 맞춰졌을 때 버튼 색상)", "Check out colors page to see all the color names you can use.": "사용할 수 있는 모든 색상 이름을 보고 싶으시면 색상 페이지를 확인해보세요.", "Check out themes page to see all the CSS variables you can use to customize the design decision (example: border-radius, animations, etc.)": "디자인 결정에 따라 커스터마이징 할 수 있는 모든 CSS 변수를 보시려면 테마 페이지를 확인해보세요. (예를 들면 border-radius, animations, 등등이 있습니다.)", "Randomize": "랜덤 선택", diff --git a/src/docs/src/translation/zh_cn.json b/src/docs/src/translation/zh_cn.json index 097f0c9c28c..3043f9ec477 100644 --- a/src/docs/src/translation/zh_cn.json +++ b/src/docs/src/translation/zh_cn.json @@ -156,7 +156,7 @@ "Or you can modify the component with Tailwind CSS utility classes": "你也可以通过 TailwindCSS 的工具类来改变这个组件的样式", "Customize daisyUI components": "自定义 daisyUI 组件", "How to customize daisyUI": "如何自定义 daisyUI", - "daisyUI components comes with many variants necessary for design systems and you won't usually need to customize anything.": "daisyUI 自有的设计系统有很多变量，通常你不需要定义任何变量。", + "daisyUI components come with many variants necessary for design systems and you won't usually need to customize anything.": "daisyUI 自有的设计系统有很多变量，通常你不需要定义任何变量。", "But you can still customize components in many ways.": "但是，你仍然可以通过很多方式来实现你的自定义目标", "Let's say, you want to customize this button:": "例如，你想自定义下面这个按钮：", "You can use daisyUI utility classes:": "你可以使用 daisyUI 的工具类：", @@ -177,7 +177,7 @@ "Read more about themes": "在阅读更多关于主题的内容", "If it's true, a few base styles will be added": "如果设为 true，一些基础样式 会被添加。", "If it's true, responsive and utility classes will be added": "如果设为 true，响应式和工具类会被添加", - "If it's true, daisyUI shows logs in terminal while CSS is building": "如果设为 true，daisyUI 会在 CSS 构建时在命令行窗口输出日志。", + "If it's true, daisyUI shows logs in the terminal while CSS is building": "如果设为 true，daisyUI 会在 CSS 构建时在命令行窗口输出日志。", "If it's true, your theme will be right-to-left. You need to add dir='rtl' to your body tag.": "如果设为 true，你的主题会是从右向左展示。你需要在你的 body 标签添加dir='rtl'。", "If you're using daisyUI with RTL option, I suggest using tailwindcss-flip plugin because to flip all your Tailwind utilities automatically.": "如果你在 daisyUI 中使用 RTL 选项，我建议使用tailwindcss-flip 插件，因为这个插件可以自动帮助你翻转所有 Tailwind 工具类。", "Allows us to pick another theme for system's auto dark mode. By default, dark theme (or a custom theme named dark) will be the default theme if no theme is specified and the user is using dark mode on their system. With this config, you can set another theme to be the default dark mode theme.": "选择另一个主题作为系统自动黑暗模式的主题。dark 是默认黑暗模式主题（或者自定义的主题名字是 dark）。通过这个配置，你可以给默认黑暗模式主题设定另一个主题。", @@ -210,10 +210,10 @@ "Alert informs users about important events.": "警告提示用来提示用户重要的事件消息。", "Artboard provides fixed size container to display a demo content on mobile size.": "Artboard 提供了固定尺寸的容器，用于在手机尺寸里显示演示内容。", "Avatars are used to show a thumbnail representation of an individual or business in the interface.": "头像用于在界面中显示个人或企业的缩略图。", - "Badges are used to inform user of the status of specific data.": "徽章是用来通知用户特定数据的状态。", + "Badges are used to inform the user of the status of specific data.": "徽章是用来通知用户特定数据的状态。", "Breadcrumbs helps users to navigate through the website.": "面包屑导航可以帮助用户导航网站。", "Button group shows buttons next to each other.": "按钮组展示了一些相邻的按钮。", - "Buttons allows user to take actions or make choices.": "按钮可以让用户执行命令或者作出选择。", + "Buttons allows the user to take actions or make choices.": "按钮可以让用户执行命令或者作出选择。", "Cards are used to group and display content in a way that is easily readable.": "卡片用于显示易于阅读的显示内容。", "Carousel show images or content in a scrollable area.": "轮播可以在可滚动区域里显示图像或内容。", "Checkboxes are used to select or deselect a value.": "复选框用于选择或取消选择值。", @@ -273,35 +273,35 @@ "How to remove unused themes?": "如何去掉不使用的主题？", "You can only include the themes you want in your project.": "在你的项目中只引入你需要的主题。", "This will reduce the size of your CSS file.": "这会减小你最终的 CSS 文件。", - "In below example": "在下面的例子里", + "In the below example": "在下面的例子里", "cupcake will be the default theme for light mode": "cupcake 会成为 light 模式的默认主题", "dark will be the default theme for dark mode": "dark 会成为 dark 模式的默认主题", "cmyk can be applied on any HTML tag with data-theme='cmyk'": "当 HTML 的 tag 存在 data-theme='cmyk' 时，主题会切换为 cmyk ", "How to disable all themes?": "如何禁止所有的主题？", "If you only want the default light theme, set themes config to false.": "如果你只想要默认的 light 主题， 设置 themes 配置为 false。", "If you don't want to include any themes and disable all colors, set themes config to an empty array.": "如果你不想引入任何主题，并且禁止所有有语义的颜色名字， 设置 themes 配置为一个空数组。", - "How to use a theme only for a section of page?": "如何在页面的一部分使用主题？", + "How to use a theme only for a section of a page?": "如何在页面的一部分使用主题？", "Add data-theme='THEME_NAME' to any element and everything inside will have your theme.": "在你想使用主题的标签添加 data-theme='THEME_NAME' 即可以让这个标签下面使用对应的主题。", "You can nest themes and there is no limit!": "你可以嵌套使用主题，可能是无尽的，尝试吧！", "You can force a section of your HTML to only use a specific theme.": "你可以强制让你的 HTML 去使用一个特定的主题。", "How to add a new custom theme?": "如何增加自定义主题？", "You can add a new theme from tailwind.config.js file.": "你可以在你的 tailwind.config.js 文件里添加一个新主题。", - "In below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.": "在下面这个例子里，我添加了一个新主题叫 mytheme 并且我也引入了 dark 和 cupcake 主题。", + "In the below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.": "在下面这个例子里，我添加了一个新主题叫 mytheme 并且我也引入了 dark 和 cupcake 主题。", "The first theme (mytheme) will be the default theme.": "第一个主题 （mytheme） 会成为默认主题。", "dark theme will be the default theme for dark mode.": "dark 主题会成为默认的黑暗模式主题。", - "In below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).": "在下面这个例子里，我只设定了必要的颜色。 其他颜色会自动由 daisyUI 生成 （当一个按钮成为焦点时的颜色，或者一个primary 按钮的文字颜色）。", + "In the below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).": "在下面这个例子里，我只设定了必要的颜色。 其他颜色会自动由 daisyUI 生成 （当一个按钮成为焦点时的颜色，或者一个primary 按钮的文字颜色）。", "CSS variables in daisyUI themes": "daisyUI 主题的 CSS 变量", "There are a few optional CSS variables that you can use in daisyUI themes to customize design decisions for each theme:": "如果你想自定义 daisyUI 主题，这里有一些你可以调整的 CSS 变量：", "Custom CSS for a daisyUI theme": "给 daisyUI 主题增加自定义 CSS", "You can apply custom style to a daisyUI themes using CSS:": "你可以通过 CSS 给 daisyUI 主题增加样式：", "How to customize an existing theme?": "如何对已有主题进行自定义设置？", "In your tailwind.config.js, you can require an existing daisyUI theme and override some colors.": "在你的 tailwind.config.js，你可以获取一个特定的主题，并且覆盖这个主题的颜色变量。", - "In below example, I require and spread light theme and change its primary and primary-focus colors:": "在下面这个例子，我调整了 light 主题，并且改变了这个主题的 primary 和 primary-focus 的颜色：", + "In the below example, I require and spread light theme and change its primary and primary-focus colors:": "在下面这个例子，我调整了 light 主题，并且改变了这个主题的 primary 和 primary-focus 的颜色：", "daisyUI themes": "daisyUI 主题", "How to use daisyUI themes?": "如何使用 daisyUI 的主题？", "daisyUI Theme Generator": "daisyUI 主题生成器", - "You can add your custom themes to tailwind.config.js file in daisyui > themes array. In this page, you can pick required color values and see how the components will look like with them.": "你可以在 tailwind.config.js 文件里设置 daisyui > themes 数组来增加你的自定义主题。在这个页面，你可以查看你定义的颜色影响的组件外观的变化。", - "You can also define optional colors to have more control on the color values (for example: the color of button when it's focused of the color of the text on a button)": "你可以通过设置可选颜色变量来增加你的控制力（例如：当一个按钮成为焦点时的文字颜色）", + "You can add your custom themes to tailwind.config.js file in daisyui > themes array. On this page, you can pick required color values and see how the components will look like with them.": "你可以在 tailwind.config.js 文件里设置 daisyui > themes 数组来增加你的自定义主题。在这个页面，你可以查看你定义的颜色影响的组件外观的变化。", + "You can also define optional colors to have more control on the color values (for example: the color of a button when it's focused on the color of the text on a button)": "你可以通过设置可选颜色变量来增加你的控制力（例如：当一个按钮成为焦点时的文字颜色）", "Check out colors page to see all the color names you can use.": "查看 颜色页面 来了解你可以更改的颜色名字变量。", "Check out themes page to see all the CSS variables you can use to customize the design decision (example: border-radius, animations, etc.)": "查看 主题页面 来了解你可以调整的 CSS 变量（例如： border-radius, animations 等等。）", "Randomize": "随机一个主题", diff --git a/src/docs/src/translation/zh_tw.json b/src/docs/src/translation/zh_tw.json index 68f7a85ab3d..ea887785702 100644 --- a/src/docs/src/translation/zh_tw.json +++ b/src/docs/src/translation/zh_tw.json @@ -156,7 +156,7 @@ "Or you can modify the component with Tailwind CSS utility classes": "或者您可以使用 Tailwind CSS 的公用類別來調整", "Customize daisyUI components": "自訂 daisyUI 元件", "How to customize daisyUI": "如何自訂 daisyUI", - "daisyUI components comes with many variants necessary for design systems and you won't usually need to customize anything.": "daisyUI 的元件自帶許多設計系統所需的變體，您通常不需要自訂任何東西。", + "daisyUI components come with many variants necessary for design systems and you won't usually need to customize anything.": "daisyUI 的元件自帶許多設計系統所需的變體，您通常不需要自訂任何東西。", "But you can still customize components in many ways.": "但您仍可以通過多種方式自訂元件。", "Let's say, you want to customize this button:": "假如您想要自訂這個按鈕：", "You can use daisyUI utility classes:": "您可以使用 daisyUI 的公用類別：", @@ -177,7 +177,7 @@ "Read more about themes": "了解主題", "If it's true, a few base styles will be added": "如果設為 true，將新增數個基礎樣式", "If it's true, responsive and utility classes will be added": "如果設為 true，將新增響應式和公用類別", - "If it's true, daisyUI shows logs in terminal while CSS is building": "如果設為 true， daisyUI 在建置 CSS 時會將紀錄顯示於終端機", + "If it's true, daisyUI shows logs in the terminal while CSS is building": "如果設為 true， daisyUI 在建置 CSS 時會將紀錄顯示於終端機", "If it's true, your theme will be right-to-left. You need to add dir='rtl' to your body tag.": "如果設為 true，您的主題將以右至左顯示。您需要新增dir='rtl'至 body 標籤。", "If you're using daisyUI with RTL option, I suggest using tailwindcss-flip plugin because to flip all your Tailwind utilities automatically.": "如果您啟用了 RTL，建議使用 tailwindcss-flip 外掛程式，以自動翻轉所有 Tailwind 公用類別。", "Allows us to pick another theme for system's auto dark mode. By default, dark theme (or a custom theme named dark) will be the default theme if no theme is specified and the user is using dark mode on their system. With this config, you can set another theme to be the default dark mode theme.": "允許我們為系統的自動暗色模式選取其他主題。預設情況下，如果沒有指定主題，且使用者的系統啟用了暗色模式，預設主題將為dark (或名為dark的自訂主題)。此設定可以指定其他主題做為預設暗色模式主題。", @@ -217,38 +217,38 @@ "How to remove unused themes?": "如何移除未使用的主題？", "You can only include the themes you want in your project.": "您僅能在您的專案中引入您想要的主題。", "This will reduce the size of your CSS file.": "這將能縮減 CSS 檔案的大小。", - "In below example": "在下方的範例中，", + "In the below example": "在下方的範例中，", "cupcake will be the default theme for light mode": "cupcake將成為亮色模式的預設主題", "dark will be the default theme for dark mode": "dark將成為暗色模式的預設主題", "cmyk can be applied on any HTML tag with data-theme='cmyk'": "cmyk能夠用data-theme='cmyk'來套用到任意 HTML 標籤", "How to disable all themes?": "如何停用所有主題？", "If you only want the default light theme, set themes config to false.": "如果您只想使用預設的light主題，請將themes設定為 false。", "If you don't want to include any themes and disable all colors, set themes config to an empty array.": "如果您不想引入任何主題並停用所有顏色，請將themes陣列清空。", - "How to use a theme only for a section of page?": "如何僅將主題套用到頁面的一小部分？", + "How to use a theme only for a section of a page?": "如何僅將主題套用到頁面的一小部分？", "Add data-theme='THEME_NAME' to any element and everything inside will have your theme.": "將data-theme='THEME_NAME'新增至任何元件，即可使內部元件套用您的主題。", "You can nest themes and there is no limit!": "您可以任意將主題套入其他主題中，且沒有上限！", "You can force a section of your HTML to only use a specific theme.": "您可以強制設定 HTML 的一部分僅使用指定主題。", "How to add a new custom theme?": "如何新增自訂主題？", "You can add a new theme from tailwind.config.js file.": "您可以在tailwind.config.js檔案中新增主題。", - "In below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.": "在下方的範例中，我新增了一個叫做mytheme的新主題，並同時引入了dark和cupcake主題。", + "In the below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.": "在下方的範例中，我新增了一個叫做mytheme的新主題，並同時引入了dark和cupcake主題。", "The first theme (mytheme) will be the default theme.": "第一個主題 (mytheme) 將成為預設主題。", "dark theme will be the default theme for dark mode.": "dark主題將成為暗色模式的預設主題。", - "In below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).": "在下方的範例中，我已填入所有必填顏色，其餘顏色將自動產生 (例如當按鈕被選中時的顏色或是primary按鈕的文字顏色)。", + "In the below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).": "在下方的範例中，我已填入所有必填顏色，其餘顏色將自動產生 (例如當按鈕被選中時的顏色或是primary按鈕的文字顏色)。", "CSS variables in daisyUI themes": "daisyUI 主題中的 CSS 變數", "There are a few optional CSS variables that you can use in daisyUI themes to customize design decisions for each theme:": "There are a few optional CSS variables that you can use in daisyUI themes to customize design decisions for each theme:", "Custom CSS for a daisyUI theme": "為 daisyUI 主題自訂 CSS", "You can apply custom style to a daisyUI themes using CSS:": "您可以使用 CSS 將自訂樣式套用到 daisyUI 主題中：", "How to customize an existing theme?": "如何自訂現有主題？", "In your tailwind.config.js, you can require an existing daisyUI theme and override some colors.": "在 tailwind.config.js 檔案中，您可以引入現有的 daisyUI 主題並覆寫某些顏色。", - "In below example, I require and spread light theme and change its primary and primary-focus colors:": "在下方的範例中，我引入並套用了light主題，並更改它的primary和primary-focus顏色：", + "In the below example, I require and spread light theme and change its primary and primary-focus colors:": "在下方的範例中，我引入並套用了light主題，並更改它的primary和primary-focus顏色：", "Contribute to translation": "協助翻譯", "Alert informs users about important events.": "在重要事件發生時提醒使用者。", "Artboard provides fixed size container to display a demo content on mobile size.": "提供固定大小的容器來展示行動裝置大小的內容。", "Avatars are used to show a thumbnail representation of an individual or business in the interface.": "在介面中顯示代表個人或公司的縮圖。", - "Badges are used to inform user of the status of specific data.": "通知使用者指定資料的狀態。", + "Badges are used to inform the user of the status of specific data.": "通知使用者指定資料的狀態。", "Breadcrumbs helps users to navigate through the website.": "協助使用者瀏覽網站。", "Button group shows buttons next to each other.": "顯示相鄰按鈕。", - "Buttons allows user to take actions or make choices.": "允許使用者執行動作或做出選擇。", + "Buttons allows the user to take actions or make choices.": "允許使用者執行動作或做出選擇。", "Cards are used to group and display content in a way that is easily readable.": "用於分組並以易讀的形式顯示內容。", "Carousel show images or content in a scrollable area.": "在可捲動的區域中顯示圖片或內容。", "Checkboxes are used to select or deselect a value.": "用於選擇或取消選擇數值。", @@ -300,8 +300,8 @@ "daisyUI themes": "daisyUI 主題", "How to use daisyUI themes?": "如何使用 daisyUI 主題？", "daisyUI Theme Generator": "daisyUI 主題產生器", - "You can add your custom themes to tailwind.config.js file in daisyui > themes array. In this page, you can pick required color values and see how the components will look like with them.": "您可以在 tailwind.config.js 檔案中的 daisyui > themes 陣列中新增自訂主題。在此頁面中，您可以挑選所需的顏色值，並預覽元件外觀。", - "You can also define optional colors to have more control on the color values (for example: the color of button when it's focused of the color of the text on a button)": "您還可以定義選用顏色以近一步控制顏色數值。(例如：按鈕被選中時的顏色和按鈕文字的顏色)", + "You can add your custom themes to tailwind.config.js file in daisyui > themes array. On this page, you can pick required color values and see how the components will look like with them.": "您可以在 tailwind.config.js 檔案中的 daisyui > themes 陣列中新增自訂主題。在此頁面中，您可以挑選所需的顏色值，並預覽元件外觀。", + "You can also define optional colors to have more control on the color values (for example: the color of a button when it's focused on the color of the text on a button)": "您還可以定義選用顏色以近一步控制顏色數值。(例如：按鈕被選中時的顏色和按鈕文字的顏色)", "Check out colors page to see all the color names you can use.": "前往色彩頁面以查看所有可用的顏色名稱。", "Check out themes page to see all the CSS variables you can use to customize the design decision (example: border-radius, animations, etc.)": "前往主題頁面以查看所有可用的 CSS 變數，以便自訂設計決策 (如：border-radius、animations...等)。", "Randomize": "隨機", From 90499cccd702910d7528edb95c602381cf87076b Mon Sep 17 00:00:00 2001 From: WickedInvi Date: Sun, 14 Aug 2022 11:27:00 +0200 Subject: [PATCH 03/11] fixed: Typo --- src/colors/functions.js | 192 +++++++++++++++++++-------------------- src/tests/colors.test.js | 19 ++-- 2 files changed, 105 insertions(+), 106 deletions(-) diff --git a/src/colors/functions.js b/src/colors/functions.js index 91550f93371..2ec4d493666 100644 --- a/src/colors/functions.js +++ b/src/colors/functions.js @@ -1,189 +1,200 @@ -const Color = require("color"); -const colorNames = require("./colorNames"); +const Color = require("color") +const colorNames = require("./colorNames") module.exports = { - - generateForegorundColorFrom: function (input, percentage = 0.8) { + generateForegroundColorFrom: function (input, percentage = 0.8) { if (Color(input).isDark()) { let arr = Color(input).mix(Color("white"), percentage).saturate(10).hsl().round().array() - return arr[0] + " " + arr[1] + "%" + " " + arr[2] + "%"; + return arr[0] + " " + arr[1] + "%" + " " + arr[2] + "%" } else { let arr = Color(input).mix(Color("black"), percentage).saturate(10).hsl().round().array() - return arr[0] + " " + arr[1] + "%" + " " + arr[2] + "%"; + return arr[0] + " " + arr[1] + "%" + " " + arr[2] + "%" } }, convertToHsl: function (input) { - let resultObj = {}; + let resultObj = {} if (typeof input === "object" && input !== null) { Object.entries(input).forEach(([rule, value]) => { if (colorNames.hasOwnProperty(rule)) { - const hslArray = Color(value).hsl().round().array(); - resultObj[colorNames[rule]] = hslArray[0] + " " + hslArray[1] + "%" + " " + hslArray[2] + "%"; + const hslArray = Color(value).hsl().round().array() + resultObj[colorNames[rule]] = + hslArray[0] + " " + hslArray[1] + "%" + " " + hslArray[2] + "%" } else { - resultObj[rule] = value; + resultObj[rule] = value } // auto generate focus colors if (!input.hasOwnProperty("primary-focus")) { - const darkerHslArray = Color(input["primary"]).darken(0.2).hsl().round().array(); - resultObj["--pf"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%"; + const darkerHslArray = Color(input["primary"]).darken(0.2).hsl().round().array() + resultObj["--pf"] = + darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%" } if (!input.hasOwnProperty("secondary-focus")) { - const darkerHslArray = Color(input["secondary"]).darken(0.2).hsl().round().array(); - resultObj["--sf"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%"; + const darkerHslArray = Color(input["secondary"]).darken(0.2).hsl().round().array() + resultObj["--sf"] = + darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%" } if (!input.hasOwnProperty("accent-focus")) { - const darkerHslArray = Color(input["accent"]).darken(0.2).hsl().round().array(); - resultObj["--af"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%"; + const darkerHslArray = Color(input["accent"]).darken(0.2).hsl().round().array() + resultObj["--af"] = + darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%" } if (!input.hasOwnProperty("neutral-focus")) { - const darkerHslArray = Color(input["neutral"]).darken(0.2).hsl().round().array(); - resultObj["--nf"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%"; + const darkerHslArray = Color(input["neutral"]).darken(0.2).hsl().round().array() + resultObj["--nf"] = + darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%" } // auto generate base colors if (!input.hasOwnProperty("base-100")) { - resultObj["--b1"] = 0 + " " + 0 + "%" + " " + 100 + "%"; + resultObj["--b1"] = 0 + " " + 0 + "%" + " " + 100 + "%" } if (!input.hasOwnProperty("base-200")) { - const darkerHslArray = Color(input["base-100"]).darken(0.1).hsl().round().array(); - resultObj["--b2"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%"; + const darkerHslArray = Color(input["base-100"]).darken(0.1).hsl().round().array() + resultObj["--b2"] = + darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%" } if (!input.hasOwnProperty("base-300")) { if (input.hasOwnProperty("base-200")) { - const darkerHslArray = Color(input["base-200"]).darken(0.1).hsl().round().array(); - resultObj["--b3"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%"; + const darkerHslArray = Color(input["base-200"]).darken(0.1).hsl().round().array() + resultObj["--b3"] = + darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%" } else { - const darkerHslArray = Color(input["base-100"]).darken(0.1).darken(0.1).hsl().round().array(); - resultObj["--b3"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%"; + const darkerHslArray = Color(input["base-100"]) + .darken(0.1) + .darken(0.1) + .hsl() + .round() + .array() + resultObj["--b3"] = + darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%" } } // auto generate state colors if (!input.hasOwnProperty("info")) { - resultObj["--in"] = 198 + " " + 93 + "%" + " " + 60 + "%"; + resultObj["--in"] = 198 + " " + 93 + "%" + " " + 60 + "%" } if (!input.hasOwnProperty("success")) { - resultObj["--su"] = 158 + " " + 64 + "%" + " " + 52 + "%"; + resultObj["--su"] = 158 + " " + 64 + "%" + " " + 52 + "%" } if (!input.hasOwnProperty("warning")) { - resultObj["--wa"] = 43 + " " + 96 + "%" + " " + 56 + "%"; + resultObj["--wa"] = 43 + " " + 96 + "%" + " " + 56 + "%" } if (!input.hasOwnProperty("error")) { - resultObj["--er"] = 0 + " " + 91 + "%" + " " + 71 + "%"; + resultObj["--er"] = 0 + " " + 91 + "%" + " " + 71 + "%" } // auto generate content colors if (!input.hasOwnProperty("base-content")) { - resultObj["--bc"] = this.generateForegorundColorFrom(input["base-100"]) + resultObj["--bc"] = this.generateForegroundColorFrom(input["base-100"]) } if (!input.hasOwnProperty("primary-content")) { - resultObj["--pc"] = this.generateForegorundColorFrom(input["primary"]) + resultObj["--pc"] = this.generateForegroundColorFrom(input["primary"]) } if (!input.hasOwnProperty("secondary-content")) { - resultObj["--sc"] = this.generateForegorundColorFrom(input["secondary"]) + resultObj["--sc"] = this.generateForegroundColorFrom(input["secondary"]) } if (!input.hasOwnProperty("accent-content")) { - resultObj["--ac"] = this.generateForegorundColorFrom(input["accent"]) + resultObj["--ac"] = this.generateForegroundColorFrom(input["accent"]) } if (!input.hasOwnProperty("neutral-content")) { - resultObj["--nc"] = this.generateForegorundColorFrom(input["neutral"]) + resultObj["--nc"] = this.generateForegroundColorFrom(input["neutral"]) } if (!input.hasOwnProperty("info-content")) { if (input.hasOwnProperty("info")) { - resultObj["--inc"] = this.generateForegorundColorFrom(input["info"]) + resultObj["--inc"] = this.generateForegroundColorFrom(input["info"]) } else { - resultObj["--inc"] = 198 + " " + 100 + "%" + " " + 12 + "%"; + resultObj["--inc"] = 198 + " " + 100 + "%" + " " + 12 + "%" } } if (!input.hasOwnProperty("success-content")) { if (input.hasOwnProperty("success")) { - resultObj["--suc"] = this.generateForegorundColorFrom(input["success"]) + resultObj["--suc"] = this.generateForegroundColorFrom(input["success"]) } else { - resultObj["--suc"] = 158 + " " + 100 + "%" + " " + 10 + "%"; + resultObj["--suc"] = 158 + " " + 100 + "%" + " " + 10 + "%" } } if (!input.hasOwnProperty("warning-content")) { if (input.hasOwnProperty("warning")) { - resultObj["--wac"] = this.generateForegorundColorFrom(input["warning"]) + resultObj["--wac"] = this.generateForegroundColorFrom(input["warning"]) } else { - resultObj["--wac"] = 43 + " " + 100 + "%" + " " + 11 + "%"; + resultObj["--wac"] = 43 + " " + 100 + "%" + " " + 11 + "%" } } if (!input.hasOwnProperty("error-content")) { if (input.hasOwnProperty("error")) { - resultObj["--erc"] = this.generateForegorundColorFrom(input["error"]) + resultObj["--erc"] = this.generateForegroundColorFrom(input["error"]) } else { - resultObj["--erc"] = 0 + " " + 100 + "%" + " " + 14 + "%"; + resultObj["--erc"] = 0 + " " + 100 + "%" + " " + 14 + "%" } } // auto generate css variables if (!input.hasOwnProperty("--rounded-box")) { - resultObj["--rounded-box"] = "1rem"; + resultObj["--rounded-box"] = "1rem" } if (!input.hasOwnProperty("--rounded-btn")) { - resultObj["--rounded-btn"] = "0.5rem"; + resultObj["--rounded-btn"] = "0.5rem" } if (!input.hasOwnProperty("--rounded-badge")) { - resultObj["--rounded-badge"] = "1.9rem"; + resultObj["--rounded-badge"] = "1.9rem" } if (!input.hasOwnProperty("--animation-btn")) { - resultObj["--animation-btn"] = "0.25s"; + resultObj["--animation-btn"] = "0.25s" } if (!input.hasOwnProperty("--animation-input")) { - resultObj["--animation-input"] = ".2s"; + resultObj["--animation-input"] = ".2s" } if (!input.hasOwnProperty("--btn-text-case")) { - resultObj["--btn-text-case"] = "uppercase"; + resultObj["--btn-text-case"] = "uppercase" } if (!input.hasOwnProperty("--btn-focus-scale")) { - resultObj["--btn-focus-scale"] = "0.95"; + resultObj["--btn-focus-scale"] = "0.95" } if (!input.hasOwnProperty("--border-btn")) { - resultObj["--border-btn"] = "1px"; + resultObj["--border-btn"] = "1px" } if (!input.hasOwnProperty("--tab-border")) { - resultObj["--tab-border"] = "1px"; + resultObj["--tab-border"] = "1px" } if (!input.hasOwnProperty("--tab-radius")) { - resultObj["--tab-radius"] = "0.5rem"; + resultObj["--tab-radius"] = "0.5rem" } - - }); - return resultObj; + }) + return resultObj } - return input; + return input }, injectThemes: function (addBase, config, themes) { - let includedThemesObj = new Object(); + let includedThemesObj = new Object() // add light themes if (config("daisyui.themes") == false) { Object.entries(themes).forEach(([theme, index]) => { - includedThemesObj[theme] = this.convertToHsl(themes[theme]); - }); + includedThemesObj[theme] = this.convertToHsl(themes[theme]) + }) } // add default themes if (config("daisyui.themes") != false) { Object.entries(themes).forEach(([theme, index]) => { - includedThemesObj[theme] = this.convertToHsl(themes[theme]); - }); + includedThemesObj[theme] = this.convertToHsl(themes[theme]) + }) } // add custom themes @@ -192,27 +203,23 @@ module.exports = { if (typeof item === "object" && item !== null) { Object.entries(item).forEach(([customThemeName, customThemevalue]) => { includedThemesObj["[data-theme=" + customThemeName + "]"] = - this.convertToHsl(customThemevalue); - }); + this.convertToHsl(customThemevalue) + }) } - }); + }) } - - - let themeOrder = []; + let themeOrder = [] if (Array.isArray(config("daisyui.themes"))) { config("daisyui.themes").forEach((theme, index) => { if (typeof theme === "object" && theme !== null) { Object.entries(theme).forEach(([customThemeName, customThemevalue]) => { - themeOrder.push(customThemeName); - }); - } else if ( - includedThemesObj.hasOwnProperty("[data-theme=" + theme + "]") - ) { - themeOrder.push(theme); - } - }); + themeOrder.push(customThemeName) + }) + } else if (includedThemesObj.hasOwnProperty("[data-theme=" + theme + "]")) { + themeOrder.push(theme) + } + }) } else if (config("daisyui.themes") != false) { themeOrder = [ "light", @@ -244,9 +251,9 @@ module.exports = { "night", "coffee", "winter", - ]; + ] } else if (config("daisyui.themes") == false) { - themeOrder.push("light"); + themeOrder.push("light") } // inject themes in order @@ -255,7 +262,7 @@ module.exports = { // first theme as root addBase({ [":root"]: includedThemesObj["[data-theme=" + themeName + "]"], - }); + }) } else if (index === 1) { // auto dark if (config("daisyui.darkTheme")) { @@ -265,12 +272,9 @@ module.exports = { ) { addBase({ ["@media (prefers-color-scheme: dark)"]: { - [":root"]: - includedThemesObj[ - `[data-theme=${config("daisyui.darkTheme")}]` - ], + [":root"]: includedThemesObj[`[data-theme=${config("daisyui.darkTheme")}]`], }, - }); + }) } } else { if (themeOrder[0] != "dark" && themeOrder.includes("dark")) { @@ -278,33 +282,29 @@ module.exports = { ["@media (prefers-color-scheme: dark)"]: { [":root"]: includedThemesObj["[data-theme=dark]"], }, - }); + }) } } // theme 0 with name addBase({ ["[data-theme=" + themeOrder[0] + "]"]: includedThemesObj["[data-theme=" + themeOrder[0] + "]"], - }); + }) // theme 1 with name addBase({ ["[data-theme=" + themeOrder[1] + "]"]: includedThemesObj["[data-theme=" + themeOrder[1] + "]"], - }); + }) } else { addBase({ - ["[data-theme=" + themeName + "]"]: - includedThemesObj["[data-theme=" + themeName + "]"], - }); + ["[data-theme=" + themeName + "]"]: includedThemesObj["[data-theme=" + themeName + "]"], + }) } - }); - - + }) return { includedThemesObj: includedThemesObj, themeOrder: themeOrder, - }; - } - -} \ No newline at end of file + } + }, +} diff --git a/src/tests/colors.test.js b/src/tests/colors.test.js index e0630ffb4a4..983510af4cc 100644 --- a/src/tests/colors.test.js +++ b/src/tests/colors.test.js @@ -1,14 +1,13 @@ -import { expect, test } from 'vitest' -import * as colorFunctions from '../colors/functions' +import { expect, test } from "vitest" +import * as colorFunctions from "../colors/functions" import { colorToHslValue } from "./utils" - -test('Foreground color generator function', () => { - expect(colorFunctions.generateForegorundColorFrom("#fff")).toBe(colorToHslValue("#333")) - expect(colorFunctions.generateForegorundColorFrom("#000")).toBe(colorToHslValue("#ccc")) - expect(colorFunctions.generateForegorundColorFrom("#fff", 1)).toBe(colorToHslValue("#000")) - expect(colorFunctions.generateForegorundColorFrom("#000", 1)).toBe(colorToHslValue("#fff")) - expect(colorFunctions.generateForegorundColorFrom("#1D9BF0")).toBe(colorToHslValue("#d2edff")) - expect(colorFunctions.generateForegorundColorFrom("#CF212E")).toBe(colorToHslValue("#ffc7cb")) +test("Foreground color generator function", () => { + expect(colorFunctions.generateForegroundColorFrom("#fff")).toBe(colorToHslValue("#333")) + expect(colorFunctions.generateForegroundColorFrom("#000")).toBe(colorToHslValue("#ccc")) + expect(colorFunctions.generateForegroundColorFrom("#fff", 1)).toBe(colorToHslValue("#000")) + expect(colorFunctions.generateForegroundColorFrom("#000", 1)).toBe(colorToHslValue("#fff")) + expect(colorFunctions.generateForegroundColorFrom("#1D9BF0")).toBe(colorToHslValue("#d2edff")) + expect(colorFunctions.generateForegroundColorFrom("#CF212E")).toBe(colorToHslValue("#ffc7cb")) }) From 2a5ff62534a9665d18c8ed9a67160462f503cbf6 Mon Sep 17 00:00:00 2001 From: Deyan Petrov Date: Mon, 15 Aug 2022 09:11:31 +0200 Subject: [PATCH 04/11] Revert "fixed: Typo" This reverts commit 90499cccd702910d7528edb95c602381cf87076b. --- src/colors/functions.js | 192 +++++++++++++++++++-------------------- src/tests/colors.test.js | 19 ++-- 2 files changed, 106 insertions(+), 105 deletions(-) diff --git a/src/colors/functions.js b/src/colors/functions.js index 2ec4d493666..91550f93371 100644 --- a/src/colors/functions.js +++ b/src/colors/functions.js @@ -1,200 +1,189 @@ -const Color = require("color") -const colorNames = require("./colorNames") +const Color = require("color"); +const colorNames = require("./colorNames"); module.exports = { - generateForegroundColorFrom: function (input, percentage = 0.8) { + + generateForegorundColorFrom: function (input, percentage = 0.8) { if (Color(input).isDark()) { let arr = Color(input).mix(Color("white"), percentage).saturate(10).hsl().round().array() - return arr[0] + " " + arr[1] + "%" + " " + arr[2] + "%" + return arr[0] + " " + arr[1] + "%" + " " + arr[2] + "%"; } else { let arr = Color(input).mix(Color("black"), percentage).saturate(10).hsl().round().array() - return arr[0] + " " + arr[1] + "%" + " " + arr[2] + "%" + return arr[0] + " " + arr[1] + "%" + " " + arr[2] + "%"; } }, convertToHsl: function (input) { - let resultObj = {} + let resultObj = {}; if (typeof input === "object" && input !== null) { Object.entries(input).forEach(([rule, value]) => { if (colorNames.hasOwnProperty(rule)) { - const hslArray = Color(value).hsl().round().array() - resultObj[colorNames[rule]] = - hslArray[0] + " " + hslArray[1] + "%" + " " + hslArray[2] + "%" + const hslArray = Color(value).hsl().round().array(); + resultObj[colorNames[rule]] = hslArray[0] + " " + hslArray[1] + "%" + " " + hslArray[2] + "%"; } else { - resultObj[rule] = value + resultObj[rule] = value; } // auto generate focus colors if (!input.hasOwnProperty("primary-focus")) { - const darkerHslArray = Color(input["primary"]).darken(0.2).hsl().round().array() - resultObj["--pf"] = - darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%" + const darkerHslArray = Color(input["primary"]).darken(0.2).hsl().round().array(); + resultObj["--pf"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%"; } if (!input.hasOwnProperty("secondary-focus")) { - const darkerHslArray = Color(input["secondary"]).darken(0.2).hsl().round().array() - resultObj["--sf"] = - darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%" + const darkerHslArray = Color(input["secondary"]).darken(0.2).hsl().round().array(); + resultObj["--sf"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%"; } if (!input.hasOwnProperty("accent-focus")) { - const darkerHslArray = Color(input["accent"]).darken(0.2).hsl().round().array() - resultObj["--af"] = - darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%" + const darkerHslArray = Color(input["accent"]).darken(0.2).hsl().round().array(); + resultObj["--af"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%"; } if (!input.hasOwnProperty("neutral-focus")) { - const darkerHslArray = Color(input["neutral"]).darken(0.2).hsl().round().array() - resultObj["--nf"] = - darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%" + const darkerHslArray = Color(input["neutral"]).darken(0.2).hsl().round().array(); + resultObj["--nf"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%"; } // auto generate base colors if (!input.hasOwnProperty("base-100")) { - resultObj["--b1"] = 0 + " " + 0 + "%" + " " + 100 + "%" + resultObj["--b1"] = 0 + " " + 0 + "%" + " " + 100 + "%"; } if (!input.hasOwnProperty("base-200")) { - const darkerHslArray = Color(input["base-100"]).darken(0.1).hsl().round().array() - resultObj["--b2"] = - darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%" + const darkerHslArray = Color(input["base-100"]).darken(0.1).hsl().round().array(); + resultObj["--b2"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%"; } if (!input.hasOwnProperty("base-300")) { if (input.hasOwnProperty("base-200")) { - const darkerHslArray = Color(input["base-200"]).darken(0.1).hsl().round().array() - resultObj["--b3"] = - darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%" + const darkerHslArray = Color(input["base-200"]).darken(0.1).hsl().round().array(); + resultObj["--b3"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%"; } else { - const darkerHslArray = Color(input["base-100"]) - .darken(0.1) - .darken(0.1) - .hsl() - .round() - .array() - resultObj["--b3"] = - darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%" + const darkerHslArray = Color(input["base-100"]).darken(0.1).darken(0.1).hsl().round().array(); + resultObj["--b3"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%"; } } // auto generate state colors if (!input.hasOwnProperty("info")) { - resultObj["--in"] = 198 + " " + 93 + "%" + " " + 60 + "%" + resultObj["--in"] = 198 + " " + 93 + "%" + " " + 60 + "%"; } if (!input.hasOwnProperty("success")) { - resultObj["--su"] = 158 + " " + 64 + "%" + " " + 52 + "%" + resultObj["--su"] = 158 + " " + 64 + "%" + " " + 52 + "%"; } if (!input.hasOwnProperty("warning")) { - resultObj["--wa"] = 43 + " " + 96 + "%" + " " + 56 + "%" + resultObj["--wa"] = 43 + " " + 96 + "%" + " " + 56 + "%"; } if (!input.hasOwnProperty("error")) { - resultObj["--er"] = 0 + " " + 91 + "%" + " " + 71 + "%" + resultObj["--er"] = 0 + " " + 91 + "%" + " " + 71 + "%"; } // auto generate content colors if (!input.hasOwnProperty("base-content")) { - resultObj["--bc"] = this.generateForegroundColorFrom(input["base-100"]) + resultObj["--bc"] = this.generateForegorundColorFrom(input["base-100"]) } if (!input.hasOwnProperty("primary-content")) { - resultObj["--pc"] = this.generateForegroundColorFrom(input["primary"]) + resultObj["--pc"] = this.generateForegorundColorFrom(input["primary"]) } if (!input.hasOwnProperty("secondary-content")) { - resultObj["--sc"] = this.generateForegroundColorFrom(input["secondary"]) + resultObj["--sc"] = this.generateForegorundColorFrom(input["secondary"]) } if (!input.hasOwnProperty("accent-content")) { - resultObj["--ac"] = this.generateForegroundColorFrom(input["accent"]) + resultObj["--ac"] = this.generateForegorundColorFrom(input["accent"]) } if (!input.hasOwnProperty("neutral-content")) { - resultObj["--nc"] = this.generateForegroundColorFrom(input["neutral"]) + resultObj["--nc"] = this.generateForegorundColorFrom(input["neutral"]) } if (!input.hasOwnProperty("info-content")) { if (input.hasOwnProperty("info")) { - resultObj["--inc"] = this.generateForegroundColorFrom(input["info"]) + resultObj["--inc"] = this.generateForegorundColorFrom(input["info"]) } else { - resultObj["--inc"] = 198 + " " + 100 + "%" + " " + 12 + "%" + resultObj["--inc"] = 198 + " " + 100 + "%" + " " + 12 + "%"; } } if (!input.hasOwnProperty("success-content")) { if (input.hasOwnProperty("success")) { - resultObj["--suc"] = this.generateForegroundColorFrom(input["success"]) + resultObj["--suc"] = this.generateForegorundColorFrom(input["success"]) } else { - resultObj["--suc"] = 158 + " " + 100 + "%" + " " + 10 + "%" + resultObj["--suc"] = 158 + " " + 100 + "%" + " " + 10 + "%"; } } if (!input.hasOwnProperty("warning-content")) { if (input.hasOwnProperty("warning")) { - resultObj["--wac"] = this.generateForegroundColorFrom(input["warning"]) + resultObj["--wac"] = this.generateForegorundColorFrom(input["warning"]) } else { - resultObj["--wac"] = 43 + " " + 100 + "%" + " " + 11 + "%" + resultObj["--wac"] = 43 + " " + 100 + "%" + " " + 11 + "%"; } } if (!input.hasOwnProperty("error-content")) { if (input.hasOwnProperty("error")) { - resultObj["--erc"] = this.generateForegroundColorFrom(input["error"]) + resultObj["--erc"] = this.generateForegorundColorFrom(input["error"]) } else { - resultObj["--erc"] = 0 + " " + 100 + "%" + " " + 14 + "%" + resultObj["--erc"] = 0 + " " + 100 + "%" + " " + 14 + "%"; } } // auto generate css variables if (!input.hasOwnProperty("--rounded-box")) { - resultObj["--rounded-box"] = "1rem" + resultObj["--rounded-box"] = "1rem"; } if (!input.hasOwnProperty("--rounded-btn")) { - resultObj["--rounded-btn"] = "0.5rem" + resultObj["--rounded-btn"] = "0.5rem"; } if (!input.hasOwnProperty("--rounded-badge")) { - resultObj["--rounded-badge"] = "1.9rem" + resultObj["--rounded-badge"] = "1.9rem"; } if (!input.hasOwnProperty("--animation-btn")) { - resultObj["--animation-btn"] = "0.25s" + resultObj["--animation-btn"] = "0.25s"; } if (!input.hasOwnProperty("--animation-input")) { - resultObj["--animation-input"] = ".2s" + resultObj["--animation-input"] = ".2s"; } if (!input.hasOwnProperty("--btn-text-case")) { - resultObj["--btn-text-case"] = "uppercase" + resultObj["--btn-text-case"] = "uppercase"; } if (!input.hasOwnProperty("--btn-focus-scale")) { - resultObj["--btn-focus-scale"] = "0.95" + resultObj["--btn-focus-scale"] = "0.95"; } if (!input.hasOwnProperty("--border-btn")) { - resultObj["--border-btn"] = "1px" + resultObj["--border-btn"] = "1px"; } if (!input.hasOwnProperty("--tab-border")) { - resultObj["--tab-border"] = "1px" + resultObj["--tab-border"] = "1px"; } if (!input.hasOwnProperty("--tab-radius")) { - resultObj["--tab-radius"] = "0.5rem" + resultObj["--tab-radius"] = "0.5rem"; } - }) - return resultObj + + }); + return resultObj; } - return input + return input; }, injectThemes: function (addBase, config, themes) { - let includedThemesObj = new Object() + let includedThemesObj = new Object(); // add light themes if (config("daisyui.themes") == false) { Object.entries(themes).forEach(([theme, index]) => { - includedThemesObj[theme] = this.convertToHsl(themes[theme]) - }) + includedThemesObj[theme] = this.convertToHsl(themes[theme]); + }); } // add default themes if (config("daisyui.themes") != false) { Object.entries(themes).forEach(([theme, index]) => { - includedThemesObj[theme] = this.convertToHsl(themes[theme]) - }) + includedThemesObj[theme] = this.convertToHsl(themes[theme]); + }); } // add custom themes @@ -203,23 +192,27 @@ module.exports = { if (typeof item === "object" && item !== null) { Object.entries(item).forEach(([customThemeName, customThemevalue]) => { includedThemesObj["[data-theme=" + customThemeName + "]"] = - this.convertToHsl(customThemevalue) - }) + this.convertToHsl(customThemevalue); + }); } - }) + }); } - let themeOrder = [] + + + let themeOrder = []; if (Array.isArray(config("daisyui.themes"))) { config("daisyui.themes").forEach((theme, index) => { if (typeof theme === "object" && theme !== null) { Object.entries(theme).forEach(([customThemeName, customThemevalue]) => { - themeOrder.push(customThemeName) - }) - } else if (includedThemesObj.hasOwnProperty("[data-theme=" + theme + "]")) { - themeOrder.push(theme) - } - }) + themeOrder.push(customThemeName); + }); + } else if ( + includedThemesObj.hasOwnProperty("[data-theme=" + theme + "]") + ) { + themeOrder.push(theme); + } + }); } else if (config("daisyui.themes") != false) { themeOrder = [ "light", @@ -251,9 +244,9 @@ module.exports = { "night", "coffee", "winter", - ] + ]; } else if (config("daisyui.themes") == false) { - themeOrder.push("light") + themeOrder.push("light"); } // inject themes in order @@ -262,7 +255,7 @@ module.exports = { // first theme as root addBase({ [":root"]: includedThemesObj["[data-theme=" + themeName + "]"], - }) + }); } else if (index === 1) { // auto dark if (config("daisyui.darkTheme")) { @@ -272,9 +265,12 @@ module.exports = { ) { addBase({ ["@media (prefers-color-scheme: dark)"]: { - [":root"]: includedThemesObj[`[data-theme=${config("daisyui.darkTheme")}]`], + [":root"]: + includedThemesObj[ + `[data-theme=${config("daisyui.darkTheme")}]` + ], }, - }) + }); } } else { if (themeOrder[0] != "dark" && themeOrder.includes("dark")) { @@ -282,29 +278,33 @@ module.exports = { ["@media (prefers-color-scheme: dark)"]: { [":root"]: includedThemesObj["[data-theme=dark]"], }, - }) + }); } } // theme 0 with name addBase({ ["[data-theme=" + themeOrder[0] + "]"]: includedThemesObj["[data-theme=" + themeOrder[0] + "]"], - }) + }); // theme 1 with name addBase({ ["[data-theme=" + themeOrder[1] + "]"]: includedThemesObj["[data-theme=" + themeOrder[1] + "]"], - }) + }); } else { addBase({ - ["[data-theme=" + themeName + "]"]: includedThemesObj["[data-theme=" + themeName + "]"], - }) + ["[data-theme=" + themeName + "]"]: + includedThemesObj["[data-theme=" + themeName + "]"], + }); } - }) + }); + + return { includedThemesObj: includedThemesObj, themeOrder: themeOrder, - } - }, -} + }; + } + +} \ No newline at end of file diff --git a/src/tests/colors.test.js b/src/tests/colors.test.js index 983510af4cc..e0630ffb4a4 100644 --- a/src/tests/colors.test.js +++ b/src/tests/colors.test.js @@ -1,13 +1,14 @@ -import { expect, test } from "vitest" -import * as colorFunctions from "../colors/functions" +import { expect, test } from 'vitest' +import * as colorFunctions from '../colors/functions' import { colorToHslValue } from "./utils" -test("Foreground color generator function", () => { - expect(colorFunctions.generateForegroundColorFrom("#fff")).toBe(colorToHslValue("#333")) - expect(colorFunctions.generateForegroundColorFrom("#000")).toBe(colorToHslValue("#ccc")) - expect(colorFunctions.generateForegroundColorFrom("#fff", 1)).toBe(colorToHslValue("#000")) - expect(colorFunctions.generateForegroundColorFrom("#000", 1)).toBe(colorToHslValue("#fff")) - expect(colorFunctions.generateForegroundColorFrom("#1D9BF0")).toBe(colorToHslValue("#d2edff")) - expect(colorFunctions.generateForegroundColorFrom("#CF212E")).toBe(colorToHslValue("#ffc7cb")) + +test('Foreground color generator function', () => { + expect(colorFunctions.generateForegorundColorFrom("#fff")).toBe(colorToHslValue("#333")) + expect(colorFunctions.generateForegorundColorFrom("#000")).toBe(colorToHslValue("#ccc")) + expect(colorFunctions.generateForegorundColorFrom("#fff", 1)).toBe(colorToHslValue("#000")) + expect(colorFunctions.generateForegorundColorFrom("#000", 1)).toBe(colorToHslValue("#fff")) + expect(colorFunctions.generateForegorundColorFrom("#1D9BF0")).toBe(colorToHslValue("#d2edff")) + expect(colorFunctions.generateForegorundColorFrom("#CF212E")).toBe(colorToHslValue("#ffc7cb")) }) From 7aa377e7ab18fc0e2fabb66247b692de62d0300b Mon Sep 17 00:00:00 2001 From: Deyan Petrov Date: Mon, 15 Aug 2022 09:17:37 +0200 Subject: [PATCH 05/11] fixed: Typo --- src/colors/functions.js | 20 +++++++++--------- .../images/components/bottom-navigation.jpg | Bin src/tests/colors.test.js | 12 +++++------ 3 files changed, 16 insertions(+), 16 deletions(-) mode change 100755 => 100644 src/docs/static/images/components/bottom-navigation.jpg diff --git a/src/colors/functions.js b/src/colors/functions.js index 91550f93371..d7fb529bbd9 100644 --- a/src/colors/functions.js +++ b/src/colors/functions.js @@ -3,7 +3,7 @@ const colorNames = require("./colorNames"); module.exports = { - generateForegorundColorFrom: function (input, percentage = 0.8) { + generateForegroundColorFrom: function (input, percentage = 0.8) { if (Color(input).isDark()) { let arr = Color(input).mix(Color("white"), percentage).saturate(10).hsl().round().array() return arr[0] + " " + arr[1] + "%" + " " + arr[2] + "%"; @@ -81,27 +81,27 @@ module.exports = { // auto generate content colors if (!input.hasOwnProperty("base-content")) { - resultObj["--bc"] = this.generateForegorundColorFrom(input["base-100"]) + resultObj["--bc"] = this.generateForegroundColorFrom(input["base-100"]) } if (!input.hasOwnProperty("primary-content")) { - resultObj["--pc"] = this.generateForegorundColorFrom(input["primary"]) + resultObj["--pc"] = this.generateForegroundColorFrom(input["primary"]) } if (!input.hasOwnProperty("secondary-content")) { - resultObj["--sc"] = this.generateForegorundColorFrom(input["secondary"]) + resultObj["--sc"] = this.generateForegroundColorFrom(input["secondary"]) } if (!input.hasOwnProperty("accent-content")) { - resultObj["--ac"] = this.generateForegorundColorFrom(input["accent"]) + resultObj["--ac"] = this.generateForegroundColorFrom(input["accent"]) } if (!input.hasOwnProperty("neutral-content")) { - resultObj["--nc"] = this.generateForegorundColorFrom(input["neutral"]) + resultObj["--nc"] = this.generateForegroundColorFrom(input["neutral"]) } if (!input.hasOwnProperty("info-content")) { if (input.hasOwnProperty("info")) { - resultObj["--inc"] = this.generateForegorundColorFrom(input["info"]) + resultObj["--inc"] = this.generateForegroundColorFrom(input["info"]) } else { resultObj["--inc"] = 198 + " " + 100 + "%" + " " + 12 + "%"; } @@ -109,7 +109,7 @@ module.exports = { if (!input.hasOwnProperty("success-content")) { if (input.hasOwnProperty("success")) { - resultObj["--suc"] = this.generateForegorundColorFrom(input["success"]) + resultObj["--suc"] = this.generateForegroundColorFrom(input["success"]) } else { resultObj["--suc"] = 158 + " " + 100 + "%" + " " + 10 + "%"; } @@ -117,7 +117,7 @@ module.exports = { if (!input.hasOwnProperty("warning-content")) { if (input.hasOwnProperty("warning")) { - resultObj["--wac"] = this.generateForegorundColorFrom(input["warning"]) + resultObj["--wac"] = this.generateForegroundColorFrom(input["warning"]) } else { resultObj["--wac"] = 43 + " " + 100 + "%" + " " + 11 + "%"; } @@ -125,7 +125,7 @@ module.exports = { if (!input.hasOwnProperty("error-content")) { if (input.hasOwnProperty("error")) { - resultObj["--erc"] = this.generateForegorundColorFrom(input["error"]) + resultObj["--erc"] = this.generateForegroundColorFrom(input["error"]) } else { resultObj["--erc"] = 0 + " " + 100 + "%" + " " + 14 + "%"; } diff --git a/src/docs/static/images/components/bottom-navigation.jpg b/src/docs/static/images/components/bottom-navigation.jpg old mode 100755 new mode 100644 diff --git a/src/tests/colors.test.js b/src/tests/colors.test.js index e0630ffb4a4..922d8055839 100644 --- a/src/tests/colors.test.js +++ b/src/tests/colors.test.js @@ -5,10 +5,10 @@ import { colorToHslValue } from "./utils" test('Foreground color generator function', () => { - expect(colorFunctions.generateForegorundColorFrom("#fff")).toBe(colorToHslValue("#333")) - expect(colorFunctions.generateForegorundColorFrom("#000")).toBe(colorToHslValue("#ccc")) - expect(colorFunctions.generateForegorundColorFrom("#fff", 1)).toBe(colorToHslValue("#000")) - expect(colorFunctions.generateForegorundColorFrom("#000", 1)).toBe(colorToHslValue("#fff")) - expect(colorFunctions.generateForegorundColorFrom("#1D9BF0")).toBe(colorToHslValue("#d2edff")) - expect(colorFunctions.generateForegorundColorFrom("#CF212E")).toBe(colorToHslValue("#ffc7cb")) + expect(colorFunctions.generateForegroundColorFrom("#fff")).toBe(colorToHslValue("#333")) + expect(colorFunctions.generateForegroundColorFrom("#000")).toBe(colorToHslValue("#ccc")) + expect(colorFunctions.generateForegroundColorFrom("#fff", 1)).toBe(colorToHslValue("#000")) + expect(colorFunctions.generateForegroundColorFrom("#000", 1)).toBe(colorToHslValue("#fff")) + expect(colorFunctions.generateForegroundColorFrom("#1D9BF0")).toBe(colorToHslValue("#d2edff")) + expect(colorFunctions.generateForegroundColorFrom("#CF212E")).toBe(colorToHslValue("#ffc7cb")) }) From b8a3fca607f1f9bfa0bb9edd5733f9c6d24bea32 Mon Sep 17 00:00:00 2001 From: Deyan Petrov Date: Mon, 15 Aug 2022 09:24:33 +0200 Subject: [PATCH 06/11] Revert "fixed: Typo" This reverts commit 7aa377e7ab18fc0e2fabb66247b692de62d0300b. --- src/colors/functions.js | 20 +++++++++--------- .../images/components/bottom-navigation.jpg | Bin src/tests/colors.test.js | 12 +++++------ 3 files changed, 16 insertions(+), 16 deletions(-) mode change 100644 => 100755 src/docs/static/images/components/bottom-navigation.jpg diff --git a/src/colors/functions.js b/src/colors/functions.js index d7fb529bbd9..91550f93371 100644 --- a/src/colors/functions.js +++ b/src/colors/functions.js @@ -3,7 +3,7 @@ const colorNames = require("./colorNames"); module.exports = { - generateForegroundColorFrom: function (input, percentage = 0.8) { + generateForegorundColorFrom: function (input, percentage = 0.8) { if (Color(input).isDark()) { let arr = Color(input).mix(Color("white"), percentage).saturate(10).hsl().round().array() return arr[0] + " " + arr[1] + "%" + " " + arr[2] + "%"; @@ -81,27 +81,27 @@ module.exports = { // auto generate content colors if (!input.hasOwnProperty("base-content")) { - resultObj["--bc"] = this.generateForegroundColorFrom(input["base-100"]) + resultObj["--bc"] = this.generateForegorundColorFrom(input["base-100"]) } if (!input.hasOwnProperty("primary-content")) { - resultObj["--pc"] = this.generateForegroundColorFrom(input["primary"]) + resultObj["--pc"] = this.generateForegorundColorFrom(input["primary"]) } if (!input.hasOwnProperty("secondary-content")) { - resultObj["--sc"] = this.generateForegroundColorFrom(input["secondary"]) + resultObj["--sc"] = this.generateForegorundColorFrom(input["secondary"]) } if (!input.hasOwnProperty("accent-content")) { - resultObj["--ac"] = this.generateForegroundColorFrom(input["accent"]) + resultObj["--ac"] = this.generateForegorundColorFrom(input["accent"]) } if (!input.hasOwnProperty("neutral-content")) { - resultObj["--nc"] = this.generateForegroundColorFrom(input["neutral"]) + resultObj["--nc"] = this.generateForegorundColorFrom(input["neutral"]) } if (!input.hasOwnProperty("info-content")) { if (input.hasOwnProperty("info")) { - resultObj["--inc"] = this.generateForegroundColorFrom(input["info"]) + resultObj["--inc"] = this.generateForegorundColorFrom(input["info"]) } else { resultObj["--inc"] = 198 + " " + 100 + "%" + " " + 12 + "%"; } @@ -109,7 +109,7 @@ module.exports = { if (!input.hasOwnProperty("success-content")) { if (input.hasOwnProperty("success")) { - resultObj["--suc"] = this.generateForegroundColorFrom(input["success"]) + resultObj["--suc"] = this.generateForegorundColorFrom(input["success"]) } else { resultObj["--suc"] = 158 + " " + 100 + "%" + " " + 10 + "%"; } @@ -117,7 +117,7 @@ module.exports = { if (!input.hasOwnProperty("warning-content")) { if (input.hasOwnProperty("warning")) { - resultObj["--wac"] = this.generateForegroundColorFrom(input["warning"]) + resultObj["--wac"] = this.generateForegorundColorFrom(input["warning"]) } else { resultObj["--wac"] = 43 + " " + 100 + "%" + " " + 11 + "%"; } @@ -125,7 +125,7 @@ module.exports = { if (!input.hasOwnProperty("error-content")) { if (input.hasOwnProperty("error")) { - resultObj["--erc"] = this.generateForegroundColorFrom(input["error"]) + resultObj["--erc"] = this.generateForegorundColorFrom(input["error"]) } else { resultObj["--erc"] = 0 + " " + 100 + "%" + " " + 14 + "%"; } diff --git a/src/docs/static/images/components/bottom-navigation.jpg b/src/docs/static/images/components/bottom-navigation.jpg old mode 100644 new mode 100755 diff --git a/src/tests/colors.test.js b/src/tests/colors.test.js index 922d8055839..e0630ffb4a4 100644 --- a/src/tests/colors.test.js +++ b/src/tests/colors.test.js @@ -5,10 +5,10 @@ import { colorToHslValue } from "./utils" test('Foreground color generator function', () => { - expect(colorFunctions.generateForegroundColorFrom("#fff")).toBe(colorToHslValue("#333")) - expect(colorFunctions.generateForegroundColorFrom("#000")).toBe(colorToHslValue("#ccc")) - expect(colorFunctions.generateForegroundColorFrom("#fff", 1)).toBe(colorToHslValue("#000")) - expect(colorFunctions.generateForegroundColorFrom("#000", 1)).toBe(colorToHslValue("#fff")) - expect(colorFunctions.generateForegroundColorFrom("#1D9BF0")).toBe(colorToHslValue("#d2edff")) - expect(colorFunctions.generateForegroundColorFrom("#CF212E")).toBe(colorToHslValue("#ffc7cb")) + expect(colorFunctions.generateForegorundColorFrom("#fff")).toBe(colorToHslValue("#333")) + expect(colorFunctions.generateForegorundColorFrom("#000")).toBe(colorToHslValue("#ccc")) + expect(colorFunctions.generateForegorundColorFrom("#fff", 1)).toBe(colorToHslValue("#000")) + expect(colorFunctions.generateForegorundColorFrom("#000", 1)).toBe(colorToHslValue("#fff")) + expect(colorFunctions.generateForegorundColorFrom("#1D9BF0")).toBe(colorToHslValue("#d2edff")) + expect(colorFunctions.generateForegorundColorFrom("#CF212E")).toBe(colorToHslValue("#ffc7cb")) }) From d37697ee3fb186468524e7725156538cf90ab204 Mon Sep 17 00:00:00 2001 From: Deyan Petrov Date: Mon, 15 Aug 2022 09:30:51 +0200 Subject: [PATCH 07/11] fix typo --- src/colors/functions.js | 20 ++++++++++---------- src/tests/colors.test.js | 12 ++++++------ 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/colors/functions.js b/src/colors/functions.js index 91550f93371..d7fb529bbd9 100644 --- a/src/colors/functions.js +++ b/src/colors/functions.js @@ -3,7 +3,7 @@ const colorNames = require("./colorNames"); module.exports = { - generateForegorundColorFrom: function (input, percentage = 0.8) { + generateForegroundColorFrom: function (input, percentage = 0.8) { if (Color(input).isDark()) { let arr = Color(input).mix(Color("white"), percentage).saturate(10).hsl().round().array() return arr[0] + " " + arr[1] + "%" + " " + arr[2] + "%"; @@ -81,27 +81,27 @@ module.exports = { // auto generate content colors if (!input.hasOwnProperty("base-content")) { - resultObj["--bc"] = this.generateForegorundColorFrom(input["base-100"]) + resultObj["--bc"] = this.generateForegroundColorFrom(input["base-100"]) } if (!input.hasOwnProperty("primary-content")) { - resultObj["--pc"] = this.generateForegorundColorFrom(input["primary"]) + resultObj["--pc"] = this.generateForegroundColorFrom(input["primary"]) } if (!input.hasOwnProperty("secondary-content")) { - resultObj["--sc"] = this.generateForegorundColorFrom(input["secondary"]) + resultObj["--sc"] = this.generateForegroundColorFrom(input["secondary"]) } if (!input.hasOwnProperty("accent-content")) { - resultObj["--ac"] = this.generateForegorundColorFrom(input["accent"]) + resultObj["--ac"] = this.generateForegroundColorFrom(input["accent"]) } if (!input.hasOwnProperty("neutral-content")) { - resultObj["--nc"] = this.generateForegorundColorFrom(input["neutral"]) + resultObj["--nc"] = this.generateForegroundColorFrom(input["neutral"]) } if (!input.hasOwnProperty("info-content")) { if (input.hasOwnProperty("info")) { - resultObj["--inc"] = this.generateForegorundColorFrom(input["info"]) + resultObj["--inc"] = this.generateForegroundColorFrom(input["info"]) } else { resultObj["--inc"] = 198 + " " + 100 + "%" + " " + 12 + "%"; } @@ -109,7 +109,7 @@ module.exports = { if (!input.hasOwnProperty("success-content")) { if (input.hasOwnProperty("success")) { - resultObj["--suc"] = this.generateForegorundColorFrom(input["success"]) + resultObj["--suc"] = this.generateForegroundColorFrom(input["success"]) } else { resultObj["--suc"] = 158 + " " + 100 + "%" + " " + 10 + "%"; } @@ -117,7 +117,7 @@ module.exports = { if (!input.hasOwnProperty("warning-content")) { if (input.hasOwnProperty("warning")) { - resultObj["--wac"] = this.generateForegorundColorFrom(input["warning"]) + resultObj["--wac"] = this.generateForegroundColorFrom(input["warning"]) } else { resultObj["--wac"] = 43 + " " + 100 + "%" + " " + 11 + "%"; } @@ -125,7 +125,7 @@ module.exports = { if (!input.hasOwnProperty("error-content")) { if (input.hasOwnProperty("error")) { - resultObj["--erc"] = this.generateForegorundColorFrom(input["error"]) + resultObj["--erc"] = this.generateForegroundColorFrom(input["error"]) } else { resultObj["--erc"] = 0 + " " + 100 + "%" + " " + 14 + "%"; } diff --git a/src/tests/colors.test.js b/src/tests/colors.test.js index e0630ffb4a4..922d8055839 100644 --- a/src/tests/colors.test.js +++ b/src/tests/colors.test.js @@ -5,10 +5,10 @@ import { colorToHslValue } from "./utils" test('Foreground color generator function', () => { - expect(colorFunctions.generateForegorundColorFrom("#fff")).toBe(colorToHslValue("#333")) - expect(colorFunctions.generateForegorundColorFrom("#000")).toBe(colorToHslValue("#ccc")) - expect(colorFunctions.generateForegorundColorFrom("#fff", 1)).toBe(colorToHslValue("#000")) - expect(colorFunctions.generateForegorundColorFrom("#000", 1)).toBe(colorToHslValue("#fff")) - expect(colorFunctions.generateForegorundColorFrom("#1D9BF0")).toBe(colorToHslValue("#d2edff")) - expect(colorFunctions.generateForegorundColorFrom("#CF212E")).toBe(colorToHslValue("#ffc7cb")) + expect(colorFunctions.generateForegroundColorFrom("#fff")).toBe(colorToHslValue("#333")) + expect(colorFunctions.generateForegroundColorFrom("#000")).toBe(colorToHslValue("#ccc")) + expect(colorFunctions.generateForegroundColorFrom("#fff", 1)).toBe(colorToHslValue("#000")) + expect(colorFunctions.generateForegroundColorFrom("#000", 1)).toBe(colorToHslValue("#fff")) + expect(colorFunctions.generateForegroundColorFrom("#1D9BF0")).toBe(colorToHslValue("#d2edff")) + expect(colorFunctions.generateForegroundColorFrom("#CF212E")).toBe(colorToHslValue("#ffc7cb")) }) From c3b16da2f670829ae72c6f98a920643334a8ef05 Mon Sep 17 00:00:00 2001 From: Deyan Petrov Date: Thu, 18 Aug 2022 09:23:50 +0200 Subject: [PATCH 08/11] React tab for Code Snippets --- src/docs/src/components/Component.svelte | 25 + .../src/routes/components/alert.svelte.md | 66 +++ .../src/routes/components/artboard.svelte.md | 36 ++ .../src/routes/components/avatar.svelte.md | 147 +++++ .../src/routes/components/badge.svelte.md | 74 +++ .../components/bottom-navigation.svelte.md | 200 +++++++ .../routes/components/breadcrumbs.svelte.md | 42 ++ .../routes/components/button-group.svelte.md | 22 + .../src/routes/components/button.svelte.md | 103 ++++ src/docs/src/routes/components/card.svelte.md | 157 ++++++ .../src/routes/components/carousel.svelte.md | 229 ++++++++ .../src/routes/components/checkbox.svelte.md | 54 ++ .../src/routes/components/collapse.svelte.md | 92 ++++ .../src/routes/components/countdown.svelte.md | 108 ++++ .../src/routes/components/divider.svelte.md | 28 + .../src/routes/components/drawer.svelte.md | 93 ++++ .../src/routes/components/dropdown.svelte.md | 134 +++++ .../src/routes/components/footer.svelte.md | 271 +++++++++ src/docs/src/routes/components/hero.svelte.md | 79 +++ .../src/routes/components/indicator.svelte.md | 135 +++++ .../routes/components/input-group.svelte.md | 93 ++++ .../src/routes/components/input.svelte.md | 57 ++ src/docs/src/routes/components/kbd.svelte.md | 72 +++ src/docs/src/routes/components/link.svelte.md | 25 + src/docs/src/routes/components/mask.svelte.md | 57 ++ src/docs/src/routes/components/menu.svelte.md | 269 +++++++++ .../routes/components/mockup-code.svelte.md | 54 ++ .../routes/components/mockup-phone.svelte.md | 16 + .../routes/components/mockup-window.svelte.md | 10 + .../src/routes/components/modal.svelte.md | 90 +++ .../src/routes/components/navbar.svelte.md | 215 ++++++++ .../routes/components/pagination.svelte.md | 56 ++ .../src/routes/components/progress.svelte.md | 59 ++ .../components/radial-progress.svelte.md | 24 +- .../src/routes/components/radio.svelte.md | 34 ++ .../src/routes/components/range.svelte.md | 28 + .../src/routes/components/rating.svelte.md | 95 ++++ .../src/routes/components/select.svelte.md | 149 +++++ .../src/routes/components/stack.svelte.md | 69 +++ src/docs/src/routes/components/stat.svelte.md | 170 ++++++ .../src/routes/components/steps.svelte.md | 73 +++ src/docs/src/routes/components/swap.svelte.md | 70 +++ src/docs/src/routes/components/tab.svelte.md | 54 ++ .../src/routes/components/table.svelte.md | 515 ++++++++++++++++++ .../src/routes/components/textarea.svelte.md | 46 ++ .../src/routes/components/toast.svelte.md | 135 +++++ .../src/routes/components/toggle.svelte.md | 54 ++ .../src/routes/components/tooltip.svelte.md | 60 ++ 48 files changed, 4742 insertions(+), 2 deletions(-) diff --git a/src/docs/src/components/Component.svelte b/src/docs/src/components/Component.svelte index 59881ea9908..27edeac136e 100644 --- a/src/docs/src/components/Component.svelte +++ b/src/docs/src/components/Component.svelte @@ -14,6 +14,7 @@ let wrapper let showContent = "preview" let htmlSlot + let reactSlot let isClipboardButtonPressed = false const copyText = (text) => { @@ -58,6 +59,7 @@
+
@@ -92,6 +94,29 @@
{/if} + {#if onMount && showContent == "react"} +
+ +
+ + + +
+
+
+ +
+
+
+ {/if} diff --git a/src/docs/src/routes/components/alert.svelte.md b/src/docs/src/routes/components/alert.svelte.md index 0ec5a34b236..a257fdfbfb9 100644 --- a/src/docs/src/routes/components/alert.svelte.md +++ b/src/docs/src/routes/components/alert.svelte.md @@ -36,6 +36,14 @@ data="{[ ` } +
{
+`

+  

+    
+    12 unread messages. Tap to see.
+  

+
`
+}
@@ -53,6 +61,14 @@ data="{[ ` } +
{
+`

+  

+    
+    New software update available.
+  

+
`
+}
 @@ -70,6 +86,14 @@ data="{[ ` } +
{
+`

+  

+    
+    Your purchase has been confirmed!
+  

+
`
+}
 @@ -87,6 +111,14 @@ data="{[ ` } +
{
+`

+  

+    
+    Warning: Invalid email address!
+  

+
`
+}
 @@ -104,6 +136,14 @@ data="{[ ` } +
{
+`

+  

+    
+    Error! Task failed successfully.
+  

+
`
+}
 @@ -129,6 +169,18 @@ data="{[ ` } +
{
+`

+  

+    
+    we use cookies for no reason.
+  

+  

+    
+    
+  

+
`
+}
 @@ -158,4 +210,18 @@ data="{[ ` } +
{
+`

+  

+    
+    

+      
New message!

+      
You have 1 unread message

+    

+  

+  

+    
+  

+
`
+}
 diff --git a/src/docs/src/routes/components/artboard.svelte.md b/src/docs/src/routes/components/artboard.svelte.md index 95c13e5890a..fd3a051a0ff 100644 --- a/src/docs/src/routes/components/artboard.svelte.md +++ b/src/docs/src/routes/components/artboard.svelte.md @@ -30,6 +30,9 @@ data="{[ 
{
 `
320×568
`
 }
+
{
+`
320×568
`
+}
@@ -37,6 +40,9 @@ data="{[ 
{
 `
375×667
`
 }
+
{
+`
375×667
`
+}
 @@ -44,6 +50,9 @@ data="{[ 
{
 `
414×736
`
 }
+
{
+`
414×736
`
+}
 @@ -51,6 +60,9 @@ data="{[ 
{
 `
375×812
`
 }
+
{
+`
375×812
`
+}
 @@ -58,6 +70,9 @@ data="{[ 
{
 `
414×896
`
 }
+
{
+`
414×896
`
+}
 @@ -65,6 +80,9 @@ data="{[ 
{
 `
320×1024
`
 }
+
{
+`
320×1024
`
+}
 @@ -72,6 +90,9 @@ data="{[ 
{
 `
568×320
`
 }
+
{
+`
568×320
`
+}
 @@ -79,6 +100,9 @@ data="{[ 
{
 `
667×375
`
 }
+
{
+`
667×375
`
+}
 @@ -86,6 +110,9 @@ data="{[ 
{
 `
736×414
`
 }
+
{
+`
736×414
`
+}
 @@ -93,6 +120,9 @@ data="{[ 
{
 `
812×375
`
 }
+
{
+`
812×375
`
+}
 @@ -100,6 +130,9 @@ data="{[ 
{
 `
896×414
`
 }
+
{
+`
896×414
`
+}
 @@ -107,4 +140,7 @@ data="{[ 
{
 `
1024×320
`
 }
+
{
+`
1024×320
`
+}
 diff --git a/src/docs/src/routes/components/avatar.svelte.md b/src/docs/src/routes/components/avatar.svelte.md index 0aa89e26b0e..b86e598688b 100644 --- a/src/docs/src/routes/components/avatar.svelte.md +++ b/src/docs/src/routes/components/avatar.svelte.md @@ -34,6 +34,13 @@ data="{[ ` } +
{
+`

+  

+    
+  

+
`
+}
@@ -79,6 +86,28 @@ data="{[ ` } +
{
+`

+  

+    
+  

+

+

+  

+    Tailwind-CSS-Avatar-component
+  

+

+

+  

+    Tailwind-CSS-Avatar-component
+  

+

+

+  

+    Tailwind-CSS-Avatar-component
+  

+
`
+}
 @@ -104,6 +133,18 @@ data="{[ ` } +
{
+`

+  

+    
+  

+

+

+  

+    
+  

+
`
+}
 @@ -139,6 +180,23 @@ data="{[ ` } +
{
+`

+  

+    
+  

+

+

+  

+    
+  

+

+

+  

+    
+  

+
`
+}
 @@ -188,6 +246,30 @@ data="{[ ` } +
{
+`

+  

+    

+      
+    

+  

+  

+    

+      
+    

+  

+  

+    

+      
+    

+  

+  

+    

+      
+    

+  

+
`
+}
 @@ -237,6 +319,30 @@ data="{[ ` } +
{
+`

+  

+    

+      
+    

+  

+  

+    

+      
+    

+  

+  

+    

+      
+    

+  

+  

+    

+      +99
+    

+  

+
`
+}
 @@ -252,6 +358,13 @@ data="{[ ` } +
{
+`

+  

+    
+  

+
`
+}
 @@ -277,6 +390,18 @@ data="{[ ` } +
{
+`

+  

+    
+  

+

+

+  

+    
+  

+
`
+}
 @@ -322,4 +447,26 @@ data="{[ ` } +
{
+`

+  

+    K
+  

+
 
+

+  

+    JO
+  

+
 
+

+  

+    MX
+  

+
 
+

+  

+    AA
+  

+
`
+}
 diff --git a/src/docs/src/routes/components/badge.svelte.md b/src/docs/src/routes/components/badge.svelte.md index 3b17319d9a1..6972650bc61 100644 --- a/src/docs/src/routes/components/badge.svelte.md +++ b/src/docs/src/routes/components/badge.svelte.md @@ -35,6 +35,9 @@ data="{[ 
{
 `Badge`
 }
+
{
+`Badge`
+}
@@ -50,6 +53,13 @@ data="{[
accent
ghost
` } +
{
+`
neutral

+
primary

+
secondary

+
accent

+
ghost
`
+}
 @@ -63,6 +73,12 @@ data="{[
secondary
accent
` } +
{
+`
neutral

+
primary

+
secondary

+
accent
`
+}
 @@ -76,6 +92,12 @@ data="{[
987,654
987,654
` } +
{
+`
987,654

+
987,654

+
987,654

+
987,654
`
+}
 @@ -89,6 +111,12 @@ data="{[
` } +
{
+`

+

+

+
`
+}
 @@ -126,6 +154,24 @@ data="{[ error ` } +
{
+`

+  
+  info
+

+

+  
+  success
+

+

+  
+  warning
+

+

+  
+  error
+
`
+}
 @@ -163,6 +209,24 @@ data="{[ NEW ` } +
{
+`

+  Heading
+  NEW
+

+

+  Heading
+  NEW
+

+

+  Heading
+  NEW
+

+

+  Heading
+  NEW
+
`
+}
 @@ -184,4 +248,14 @@ data="{[
+99
` } +
{
+`
+`
+}
 diff --git a/src/docs/src/routes/components/bottom-navigation.svelte.md b/src/docs/src/routes/components/bottom-navigation.svelte.md index ea58ce10ee8..629c887b231 100644 --- a/src/docs/src/routes/components/bottom-navigation.svelte.md +++ b/src/docs/src/routes/components/bottom-navigation.svelte.md @@ -48,6 +48,19 @@ data="{[ ` } +
{
+`

+  
+  
+  
+
`
+}
@@ -119,6 +132,41 @@ data="{[ ` } +
{
+`

+  
+  
+  
+

+

+  
+  
+  
+

+

+  
+  
+  
+
`
+}
 @@ -212,6 +260,52 @@ data="{[ ` } +
{
+`

+  
+  
+  
+

+

+  
+  
+  
+

+

+  
+  
+  
+

+

+  
+  
+  
+
`
+}
 @@ -245,6 +339,22 @@ data="{[ ` } +
{
+`

+  
+  
+  
+
`
+}
 @@ -278,6 +388,22 @@ data="{[ ` } +
{
+`

+  
+  
+  
+
`
+}
 @@ -375,6 +501,56 @@ data="{[ ` } +
{
+`
+

+  
+  
+  
+

+
+

+  
+  
+  
+

+
+

+  
+  
+  
+

+
+

+  
+  
+  
+
`
+}
 @@ -424,4 +600,28 @@ data="{[ ` } +
{
+`

+  
+  
+  
+

+

+  
+  
+  
+
`
+}
 diff --git a/src/docs/src/routes/components/breadcrumbs.svelte.md b/src/docs/src/routes/components/breadcrumbs.svelte.md index 0716799b827..079e307cae2 100644 --- a/src/docs/src/routes/components/breadcrumbs.svelte.md +++ b/src/docs/src/routes/components/breadcrumbs.svelte.md @@ -38,6 +38,15 @@ data="{[ ` } +
{
+`

+  
+
`
+}
@@ -83,6 +92,28 @@ data="{[ ` } +
{
+`

+  
+
`
+}
 @@ -106,4 +137,15 @@ data="{[ ` } +
{
+`

+  
    
+    
  • Long text 1
    • 
+    
  • Long text 2
    • 
+    
  • Long text 3
    • 
+    
  • Long text 4
    • 
+    
  • Long text 5
    • 
+  

+
`
+}
 diff --git a/src/docs/src/routes/components/button-group.svelte.md b/src/docs/src/routes/components/button-group.svelte.md index 43e55b1887e..f621e2638d0 100644 --- a/src/docs/src/routes/components/button-group.svelte.md +++ b/src/docs/src/routes/components/button-group.svelte.md @@ -31,6 +31,13 @@ data="{[ ` } +
{
+`

+  
+  
+  
+
`
+}
@@ -46,6 +53,13 @@ data="{[ ` } +
{
+`

+  
+  
+  
+
`
+}
 @@ -63,4 +77,12 @@ data="{[ ` } +
{
+`

+  
+  
+  
+  
+
`
+}
 diff --git a/src/docs/src/routes/components/button.svelte.md b/src/docs/src/routes/components/button.svelte.md index d002f5d5184..9f7755ba329 100644 --- a/src/docs/src/routes/components/button.svelte.md +++ b/src/docs/src/routes/components/button.svelte.md @@ -45,6 +45,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
@@ -62,6 +65,14 @@ data="{[ ` } +
{
+`
+
+
+
+
+`
+}
 @@ -79,6 +90,14 @@ data="{[ ` } +
{
+`
+
+
+
+
+`
+}
 @@ -92,6 +111,12 @@ data="{[ ` } +
{
+`
+
+
+`
+}
 @@ -105,6 +130,12 @@ data="{[ ` } +
{
+`
+
+
+`
+}
 @@ -118,6 +149,12 @@ data="{[ ` } +
{
+`
+
+
+`
+}
 @@ -131,6 +168,12 @@ data="{[ ` } +
{
+`
+
+
+`
+}
 @@ -138,6 +181,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -145,6 +191,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -152,6 +201,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -167,6 +219,13 @@ data="{[ ` } +
{
+`Link
+
+
+
+`
+}
 @@ -176,6 +235,10 @@ data="{[ ` ` } +
{
+`
+`
+}
 @@ -193,6 +256,14 @@ data="{[ ` } +
{
+`
+`
+}
 @@ -210,6 +281,14 @@ data="{[ ` } +
{
+`
+`
+}
 @@ -223,6 +302,12 @@ data="{[ Button ` } +
{
+``
+}
 @@ -236,6 +321,12 @@ data="{[ ` } +
{
+``
+}
 @@ -243,6 +334,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -250,6 +344,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -257,6 +354,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -264,4 +364,7 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 diff --git a/src/docs/src/routes/components/card.svelte.md b/src/docs/src/routes/components/card.svelte.md index 58f0cdc20a3..393567f8e24 100644 --- a/src/docs/src/routes/components/card.svelte.md +++ b/src/docs/src/routes/components/card.svelte.md @@ -48,6 +48,18 @@ data="{[ ` } +
{
+`

+  
Shoes

+  

+    
Shoes!

+    
If a dog chews shoes whose shoes does he choose?

+    

+      
+    

+  

+
`
+}
@@ -73,6 +85,18 @@ data="{[ ` } +
{
+`

+  
Shoes

+  

+    
Shoes!

+    
If a dog chews shoes whose shoes does he choose?

+    

+      
+    

+  

+
`
+}
 @@ -106,6 +130,22 @@ data="{[ ` } +
{
+`

+  
Shoes

+  

+    

+      Shoes!
+      
NEW

+    

+    
If a dog chews shoes whose shoes does he choose?

+    

+      
Fashion
 
+      
Products

+    

+  

+
`
+}
 @@ -125,6 +165,15 @@ data="{[
Shoes
` } +
{
+`

+  

+    
Shoes!

+    
If a dog chews shoes whose shoes does he choose?

+  

+  
Shoes

+
`
+}
 @@ -154,6 +203,20 @@ data="{[ ` } +
{
+`

+  

+    Shoes
+  

+  

+    
Shoes!

+    
If a dog chews shoes whose shoes does he choose?

+    

+      
+    

+  

+
`
+}
 @@ -179,6 +242,18 @@ data="{[ ` } +
{
+`

+  
Shoes

+  

+    
Shoes!

+    
If a dog chews shoes whose shoes does he choose?

+    

+      
+    

+  

+
`
+}
 @@ -202,6 +277,17 @@ data="{[ ` } +
{
+`

+  

+    
Card title!

+    
If a dog chews shoes whose shoes does he choose?

+    

+      
+    

+  

+
`
+}
 @@ -225,6 +311,17 @@ data="{[ ` } +
{
+`

+  

+    
Card title!

+    
If a dog chews shoes whose shoes does he choose?

+    

+      
+    

+  

+
`
+}
 @@ -250,6 +347,18 @@ data="{[ ` } +
{
+`

+  

+    
Cookies!

+    
We are using cookies for no reason.

+    

+      
+      
+    

+  

+
`
+}
 @@ -275,6 +384,18 @@ data="{[ ` } +
{
+`

+  

+    

+      
+    

+    
We are using cookies for no reason.

+  

+
`
+}
 @@ -300,6 +421,18 @@ data="{[ ` } +
{
+`

+  
car!

+  

+    
Life hack

+    
How to park your car at your garage?

+    

+      
+    

+  

+
`
+}
 @@ -325,6 +458,18 @@ data="{[ ` } +
{
+`

+  
Movie

+  

+    
New movie is released!

+    
Click the button to watch on Jetflix app.

+    

+      
+    

+  

+
`
+}
 @@ -350,4 +495,16 @@ data="{[ ` } +
{
+`

+  
Album

+  

+    
New album is released!

+    
Click the button to listen on Spotiwhy app.

+    

+      
+    

+  

+
`
+}
 diff --git a/src/docs/src/routes/components/carousel.svelte.md b/src/docs/src/routes/components/carousel.svelte.md index aa9f16e4692..3f1fcdb428d 100644 --- a/src/docs/src/routes/components/carousel.svelte.md +++ b/src/docs/src/routes/components/carousel.svelte.md @@ -70,6 +70,31 @@ data="{[ ` } +
{
+`

+  

+    Burger
+  
 
+  

+    Burger
+  
 
+  

+    Burger
+  
 
+  

+    Burger
+  
 
+  

+    Burger
+  
 
+  

+    Burger
+  
 
+  

+    Burger
+  

+
`
+}
@@ -121,6 +146,31 @@ data="{[ ` } +
{
+`

+  

+    Pizza
+  
 
+  

+    Pizza
+  
 
+  

+    Pizza
+  
 
+  

+    Pizza
+  
 
+  

+    Pizza
+  
 
+  

+    Pizza
+  
 
+  

+    Pizza
+  

+
`
+}
 @@ -172,6 +222,31 @@ data="{[ ` } +
{
+`

+  

+    Drink
+  
 
+  

+    Drink
+  
 
+  

+    Drink
+  
 
+  

+    Drink
+  
 
+  

+    Drink
+  
 
+  

+    Drink
+  
 
+  

+    Drink
+  

+
`
+}
 @@ -223,6 +298,31 @@ data="{[ ` } +
{
+`

+  

+    Tailwind CSS Carousel component
+  
 
+  

+    Tailwind CSS Carousel component
+  
 
+  

+    Tailwind CSS Carousel component
+  
 
+  

+    Tailwind CSS Carousel component
+  
 
+  

+    Tailwind CSS Carousel component
+  
 
+  

+    Tailwind CSS Carousel component
+  
 
+  

+    Tailwind CSS Carousel component
+  

+
`
+}
 @@ -274,6 +374,31 @@ data="{[ ` } +
{
+`

+  

+    
+  
 
+  

+    
+  
 
+  

+    
+  
 
+  

+    
+  
 
+  

+    
+  
 
+  

+    
+  
 
+  

+    
+  

+
`
+}
 @@ -325,6 +450,31 @@ data="{[ ` } +
{
+`

+  

+    
+  
 
+  

+    
+  
 
+  

+    
+  
 
+  

+    
+  
 
+  

+    
+  
 
+  

+    
+  
 
+  

+    
+  

+
`
+}
 @@ -376,6 +526,31 @@ data="{[ ` } +
{
+`

+  

+    
+  
 
+  

+    
+  
 
+  

+    
+  
 
+  

+    
+  
 
+  

+    
+  
 
+  

+    
+  
 
+  

+    
+  

+
`
+}
 @@ -421,6 +596,28 @@ data="{[ 4 ` } +
{
+`

+  

+    
+  
 
+  

+    
+  
 
+  

+    
+  
 
+  

+    
+  

+
 
+

+  1 
+  2 
+  3 
+  4
+
`
+}
 @@ -486,4 +683,36 @@ data="{[ ` } +
{
+`

+  

+    
+    

+      ❮ 
+      ❯
+    

+  
 
+  

+    
+    

+      ❮ 
+      ❯
+    

+  
 
+  

+    
+    

+      ❮ 
+      ❯
+    

+  
 
+  

+    
+    

+      ❮ 
+      ❯
+    

+  

+
`
+}
 diff --git a/src/docs/src/routes/components/checkbox.svelte.md b/src/docs/src/routes/components/checkbox.svelte.md index 30ce544539c..b1e0e6e49dc 100644 --- a/src/docs/src/routes/components/checkbox.svelte.md +++ b/src/docs/src/routes/components/checkbox.svelte.md @@ -31,6 +31,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
@@ -48,6 +51,14 @@ data="{[ ` } +
{
+`

+  
+
`
+}
 @@ -65,6 +76,14 @@ data="{[ ` } +
{
+`

+  
+
`
+}
 @@ -82,6 +101,14 @@ data="{[ ` } +
{
+`

+  
+
`
+}
 @@ -99,6 +126,14 @@ data="{[ ` } +
{
+`

+  
+
`
+}
 @@ -114,6 +149,12 @@ data="{[ ` } +
{
+` 
+ 
+ 
+`
+}
 @@ -121,6 +162,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -128,6 +172,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -139,4 +186,11 @@ data="{[ ` } +
{
+`
+
+`
+}
 diff --git a/src/docs/src/routes/components/collapse.svelte.md b/src/docs/src/routes/components/collapse.svelte.md index f6c1e62b8ae..155bfa303b1 100644 --- a/src/docs/src/routes/components/collapse.svelte.md +++ b/src/docs/src/routes/components/collapse.svelte.md @@ -42,6 +42,16 @@ data="{[ ` } +
{
+`
 
+  

+    Focus me to see content
+  

+  
 
+    
tabindex="0" attribute is necessary to make the div focusable

+  

+
`
+}
@@ -65,6 +75,17 @@ data="{[ ` } +
{
+`

+   
+  

+    Click me to show/hide content
+  

+  
 
+    
hello

+  

+
`
+}
 @@ -86,6 +107,16 @@ data="{[ ` } +
{
+`
 
+  

+    Focus me to see content
+  

+  
 
+    
tabindex="0" attribute is necessary to make the div focusable

+  

+
`
+}
 @@ -107,6 +138,16 @@ data="{[ ` } +
{
+`

+  

+    Focus me to see content
+  

+  
 
+    
tabindex="0" attribute is necessary to make the div focusable

+  

+
`
+}
 @@ -128,6 +169,16 @@ data="{[ ` } +
{
+`

+  

+    Focus me to see content
+  

+  
 
+    
tabindex="0" attribute is necessary to make the div focusable

+  

+
`
+}
 @@ -149,6 +200,16 @@ data="{[ ` } +
{
+`
 
+  

+    I have collapse-open className
+  

+  
 
+    
tabindex="0" attribute is necessary to make the div focusable

+  

+
`
+}
 @@ -170,6 +231,16 @@ data="{[ ` } +
{
+`
 
+  

+    I have collapse-close className
+  

+  
 
+    
tabindex="0" attribute is necessary to make the div focusable

+  

+
`
+}
 @@ -191,6 +262,16 @@ data="{[ ` } +
{
+`

+  

+    Focus me to see content
+  

+  
 
+    
tabindex="0" attribute is necessary to make the div focusable

+  

+
`
+}
 @@ -214,4 +295,15 @@ data="{[ ` } +
{
+`

+   
+  

+    Click me to show/hide content
+  

+  
 
+    
hello

+  

+
`
+}
 diff --git a/src/docs/src/routes/components/countdown.svelte.md b/src/docs/src/routes/components/countdown.svelte.md index b9e7f2cb7bd..f54cec15305 100644 --- a/src/docs/src/routes/components/countdown.svelte.md +++ b/src/docs/src/routes/components/countdown.svelte.md @@ -43,6 +43,11 @@ data="{[ ` } +
{
+`
+  
+`
+}
@@ -54,6 +59,11 @@ data="{[ ` } +
{
+`
+  
+`
+}
 @@ -69,6 +79,13 @@ data="{[ s ` } +
{
+`
+  h
+  m
+  s
+`
+}
 @@ -84,6 +101,13 @@ data="{[ ` } +
{
+`
+  :
+  :
+  
+`
+}
 @@ -141,6 +165,34 @@ data="{[ ` } +
{
+`

+  

+    
+        
+    
+    days
+  
 
+  

+    
+        
+    
+    hours
+  
 
+  

+    
+      
+    
+    min
+  
 
+  

+    
+      
+    
+    sec
+  

+
`
+}
 @@ -198,6 +250,34 @@ data="{[ ` } +
{
+`

+  

+    
+      
+    
+    days
+  
 
+  

+    
+      
+    
+    hours
+  
 
+  

+    
+      
+    
+    min
+  
 
+  

+    
+      
+    
+    sec
+  

+
`
+}
 @@ -255,4 +335,32 @@ data="{[ ` } +
{
+`

+  

+    
+      
+    
+    days
+  
 
+  

+    
+      
+    
+    hours
+  
 
+  

+    
+      
+    
+    min
+  
 
+  

+    
+      
+    
+    sec
+  

+
`
+}
 diff --git a/src/docs/src/routes/components/divider.svelte.md b/src/docs/src/routes/components/divider.svelte.md index 385988bc539..2bd9a6c45c3 100644 --- a/src/docs/src/routes/components/divider.svelte.md +++ b/src/docs/src/routes/components/divider.svelte.md @@ -32,6 +32,13 @@ data="{[
content
` } +
{
+`

+  
content

+  
OR

+  
content

+
`
+}
@@ -47,6 +54,13 @@ data="{[
content
` } +
{
+`

+  
content

+  
OR

+  
content

+
`
+}
 @@ -62,6 +76,13 @@ data="{[
content
` } +
{
+`

+  
content
 
+  
 
+  
content

+
`
+}
 @@ -77,4 +98,11 @@ data="{[
content
` } +
{
+`

+  
content
 
+  
OR
 
+  
content

+
`
+}
 diff --git a/src/docs/src/routes/components/drawer.svelte.md b/src/docs/src/routes/components/drawer.svelte.md index 0adcce3f350..9c8eae41d1a 100644 --- a/src/docs/src/routes/components/drawer.svelte.md +++ b/src/docs/src/routes/components/drawer.svelte.md @@ -74,6 +74,25 @@ You can check/uncheck the checkbox using JavaScript or using ` ` } +
{
+`

+  
+  
+
`
+}
@@ -66,6 +77,17 @@ data="{[ ` } +
{
+`

+  
+  
+
`
+}
 @@ -91,6 +113,18 @@ data="{[ ` } +
{
+`

+  
+  
+
`
+}
 @@ -114,6 +148,17 @@ data="{[ ` } +
{
+`

+  
+  
+
`
+}
 @@ -169,6 +214,32 @@ data="{[ ` } +
{
+`

+  
+

+

+  
+

+

+  
+

+

+  
+
`
+}
 @@ -190,6 +261,16 @@ data="{[ ` } +
{
+`

+  

+    
+    
+  

+
`
+}
 @@ -215,4 +296,16 @@ data="{[ ` } +
{
+`

+  

+    
+    
+  

+
`
+}
 diff --git a/src/docs/src/routes/components/input.svelte.md b/src/docs/src/routes/components/input.svelte.md index 8f9c360bafe..8aad496fa33 100644 --- a/src/docs/src/routes/components/input.svelte.md +++ b/src/docs/src/routes/components/input.svelte.md @@ -37,6 +37,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
@@ -44,6 +47,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -51,6 +57,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -78,6 +87,19 @@ data="{[ ` } +
{
+`

+  
+  
+  
+
`
+}
 @@ -85,6 +107,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -92,6 +117,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -99,6 +127,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -106,6 +137,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -113,6 +147,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -120,6 +157,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -127,6 +167,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -147,6 +190,17 @@ data="{[ ` } +
{
+`
+
+
+
+
+
+
+
+`
+}
 @@ -154,4 +208,7 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 diff --git a/src/docs/src/routes/components/kbd.svelte.md b/src/docs/src/routes/components/kbd.svelte.md index 8e69bad50d2..4d72a173e3d 100644 --- a/src/docs/src/routes/components/kbd.svelte.md +++ b/src/docs/src/routes/components/kbd.svelte.md @@ -26,6 +26,9 @@ data="{[ 
{
 `A`
 }
+
{
+`A`
+}
@@ -39,6 +42,12 @@ data="{[ Shift Shift` } +
{
+`Shift
+Shift
+Shift
+Shift`
+}
 @@ -46,6 +55,9 @@ Press F to pay respects. 
{
 `Press F to pay respects.`
 }
+
{
+`Press F to pay respects.`
+}
 @@ -61,6 +73,13 @@ Press F to pay respects. + del` } +
{
+`ctrl
++
+shift
++
+del`
+}
 @@ -74,6 +93,12 @@ Press F to pay respects. ⇧ ⌃` } +
{
+`⌘
+⌥
+⇧
+⌃`
+}
 @@ -147,6 +172,41 @@ Press F to pay respects. / ` } +
{
+`

+  q
+  w
+  e
+  r
+  t
+  y
+  u
+  i
+  o
+  p
+
 
+

+  a
+  s
+  d
+  f
+  g
+  h
+  j
+  k
+  l
+
 
+

+  z
+  x
+  c
+  v
+  b
+  n
+  m
+  /
+
`
+}
 @@ -172,4 +232,16 @@ Press F to pay respects. ▼ ` } +
{
+`

+  ▲
+

+

+  ◀︎
+  ▶︎
+

+

+  ▼
+
`
+}
 diff --git a/src/docs/src/routes/components/link.svelte.md b/src/docs/src/routes/components/link.svelte.md index 12c7cb70f51..1c4d9ce2339 100644 --- a/src/docs/src/routes/components/link.svelte.md +++ b/src/docs/src/routes/components/link.svelte.md @@ -27,6 +27,9 @@ data="{[ 
{
 `I'm a simple link`
 }
+
{
+`I'm a simple link`
+}
@@ -42,6 +45,13 @@ data="{[ normal link again.

` } +
{
+`
Tailwind CSS resets the style of links by default.
+  

+  Add "link" className to make it look like a 
+  normal link again.
+
`
+}
 @@ -49,6 +59,9 @@ data="{[ 
{
 `I'm a simple link`
 }
+
{
+`I'm a simple link`
+}
 @@ -56,6 +69,9 @@ data="{[ 
{
 `I'm a simple link`
 }
+
{
+`I'm a simple link`
+}
 @@ -63,6 +79,9 @@ data="{[ 
{
 `I'm a simple link`
 }
+
{
+`I'm a simple link`
+}
 @@ -70,6 +89,9 @@ data="{[ 
{
 `I'm a simple link`
 }
+
{
+`I'm a simple link`
+}
 @@ -77,4 +99,7 @@ data="{[ 
{
 `I'm a simple link`
 }
+
{
+`I'm a simple link`
+}
 diff --git a/src/docs/src/routes/components/mask.svelte.md b/src/docs/src/routes/components/mask.svelte.md index 874f90356ca..f6c54e6b085 100644 --- a/src/docs/src/routes/components/mask.svelte.md +++ b/src/docs/src/routes/components/mask.svelte.md @@ -43,6 +43,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
@@ -50,6 +53,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -57,6 +63,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -64,6 +73,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -71,6 +83,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -78,6 +93,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -85,6 +103,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -92,6 +113,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -99,6 +123,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -106,6 +133,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -113,6 +143,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -120,6 +153,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -127,6 +163,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -134,6 +173,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -141,6 +183,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -148,6 +193,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -155,6 +203,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -162,6 +213,9 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 @@ -169,4 +223,7 @@ data="{[ 
{
 ``
 }
+
{
+``
+}
 diff --git a/src/docs/src/routes/components/menu.svelte.md b/src/docs/src/routes/components/menu.svelte.md index f983dfb04b9..d41f12c52a0 100644 --- a/src/docs/src/routes/components/menu.svelte.md +++ b/src/docs/src/routes/components/menu.svelte.md @@ -37,6 +37,13 @@ data="{[
  • Item 3
    • ` } +
    {
+``
+}
    @@ -52,6 +59,13 @@ data="{[
  • Item 3
    • ` } +
    {
+``
+}
     @@ -67,6 +81,13 @@ data="{[
  • Item 3
    • ` } +
    {
+``
+}
     @@ -82,6 +103,13 @@ data="{[
  • Item 3
    • ` } +
    {
+``
+}
     @@ -111,6 +139,20 @@ data="{[
  • Item 2
    • ` } +
    {
+``
+}
     @@ -126,6 +168,13 @@ data="{[
  • Item 3
    • ` } +
    {
+``
+}
     @@ -141,6 +190,13 @@ data="{[
  • Item 3
    • ` } +
    {
+``
+}
     @@ -156,6 +212,13 @@ data="{[
  • Item 3
    • ` } +
    {
+``
+}
     @@ -171,6 +234,13 @@ data="{[
  • Item 3
    • ` } +
    {
+``
+}
     @@ -186,6 +256,13 @@ data="{[
  • Item 3
    • ` } +
    {
+``
+}
     @@ -201,6 +278,13 @@ data="{[
  • Item 3
    • ` } +
    {
+``
+}
     @@ -216,6 +300,13 @@ data="{[
  • Item 3
    • ` } +
    {
+``
+}
     @@ -261,6 +352,28 @@ data="{[ ` } +
    {
+``
+}
     @@ -300,6 +413,25 @@ data="{[ ` } +
    {
+``
+}
     @@ -339,6 +471,25 @@ data="{[ ` } +
    {
+``
+}
     @@ -378,6 +529,25 @@ data="{[ ` } +
    {
+``
+}
     @@ -410,6 +580,21 @@ data="{[
  • Item 3
    • ` } +
    {
+``
+}
     @@ -442,6 +627,21 @@ data="{[
  • Item 3
    • ` } +
    {
+``
+}
     @@ -474,6 +674,21 @@ data="{[
  • Item 3
    • ` } +
    {
+``
+}
     @@ -506,6 +721,21 @@ data="{[
  • Item 3
    • ` } +
    {
+``
+}
     @@ -572,6 +802,38 @@ data="{[ ` } +
    {
+`
      
+  
    • Item
      • 
+  
+  
    • 
+    Level 1
+    
        
+      
      • 
+        Level 2
+        
          
+          
        • 
+            Level 3
+            
            
+              
          • 
+                Level 4
+                
+              
            • 
+            
          
+          
          • 
+        
        
+      
        • 
+    
      
+  
      • 
+
    `
+}
     @@ -587,4 +849,11 @@ data="{[
  • Item 3
    • ` } +
    {
+``
+}
     diff --git a/src/docs/src/routes/components/mockup-code.svelte.md b/src/docs/src/routes/components/mockup-code.svelte.md index 9055947feba..6d2dc9583b1 100644 --- a/src/docs/src/routes/components/mockup-code.svelte.md +++ b/src/docs/src/routes/components/mockup-code.svelte.md @@ -20,40 +20,73 @@ data="{[ 
    npm i daisyui
    + 
    npm i daisyui
    {
 `
    
   
    npm i daisyui
    
+
    {
+`
    
+  
    npm i daisyui
    
+
    `
+}
    
+  
    npm i daisyui
    
 
    `
 }
    + 
    npm i daisyui
    npm i daisyui
    installing...
    + 
    installing...
    Done!
    + 
    Done!
    {
 `
    
   
    npm i daisyui
     
+
    {
+`
    
+  
    npm i daisyui
     
   
    installing...
     
+  
    npm i daisyui
     
+  
    installing...
     
   
    Done!
    
+  
    installing...
     
+  
    Done!
    
+
    `
+}
    
+  
    Done!
    
 
    `
 }
    + 
    npm i daisyui
    npm i daisyui
    installing...
    + 
    installing...
    Error!
    + 
    Error!
    {
 `
    
   
    npm i daisyui
     
+
    {
+`
    
+  
    npm i daisyui
     
+  
    installing...
     
+  
    npm i daisyui
     
   
    installing...
     
   
    Error!
    
+  
    installing...
     
+  
    Error!
    
+
    `
+}
    
+  
    Error!
    
 
    `
 }
     @@ -61,10 +94,17 @@ data="{[ 
    Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.
    + 
    Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.
    {
 `
    
   
    Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.
    
+
    {
+`
    
+  
    Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.
    
+
    `
+}
    
+  
    Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.
    
 
    `
 }
     @@ -72,10 +112,17 @@ data="{[ 
    without prefix
    + 
    without prefix
    {
 `
    
   
    without prefix
    
+
    {
+`
    
+  
    without prefix
    
+
    `
+}
    
+  
    without prefix
    
 
    `
 }
     @@ -83,10 +130,17 @@ data="{[ 
    can be any color!
    + 
    can be any color!
    {
 `
    
   
    can be any color!
    
+
    {
+`
    
+  
    can be any color!
    
+
    `
+}
    
+  
    can be any color!
    
 
    `
 }
     diff --git a/src/docs/src/routes/components/mockup-phone.svelte.md b/src/docs/src/routes/components/mockup-phone.svelte.md index cafd2f20999..de0ae04ea1e 100644 --- a/src/docs/src/routes/components/mockup-phone.svelte.md +++ b/src/docs/src/routes/components/mockup-phone.svelte.md @@ -32,6 +32,14 @@ data="{[ ` } +
    {
+`
    
+  
     
+  
    
+    
    Hi.
    
+  
    
+
    `
+}
    @@ -49,4 +57,12 @@ data="{[ ` } +
    {
+`
    
+  
     
+  
    
+    
    Hi.
    
+  
    
+
    `
+}
     diff --git a/src/docs/src/routes/components/mockup-window.svelte.md b/src/docs/src/routes/components/mockup-window.svelte.md index 6f4d72a8de5..5edc2892f14 100644 --- a/src/docs/src/routes/components/mockup-window.svelte.md +++ b/src/docs/src/routes/components/mockup-window.svelte.md @@ -26,6 +26,11 @@ data="{[
    Hello!
    ` } +
    {
+`
    
+  
    Hello!
    
+
    `
+}
    @@ -37,4 +42,9 @@ data="{[
    Hello!
    ` } +
    {
+`
    
+  
    Hello!
    
+
    `
+}
     diff --git a/src/docs/src/routes/components/modal.svelte.md b/src/docs/src/routes/components/modal.svelte.md index 2700cf63c74..68de4a7d488 100644 --- a/src/docs/src/routes/components/modal.svelte.md +++ b/src/docs/src/routes/components/modal.svelte.md @@ -43,6 +43,22 @@ data="{[ ` } +
    {
+`
+
+
+
+
+
    
+  
    
+    
    Congratulations random Internet user!
    
+    
    You've been selected for a chance to get one year of subscription to use Wikipedia for free!
    
+    
    
+      
+    
    
+  
    
+
    `
+}
    @@ -62,6 +78,21 @@ data="{[ ` } +
    {
+`
+open modal
+
+
+
    
+  
    
+    
    Congratulations random Internet user!
    
+    
    You've been selected for a chance to get one year of subscription to use Wikipedia for free!
    
+    
    
+     Yay!
+    
    
+  
    
+
    `
+}
     @@ -81,6 +112,20 @@ data="{[ ` } +
    {
+`
+
+
+
+
+
    
+  
    
+    
+    
    Congratulations random Internet user!
    
+    
    You've been selected for a chance to get one year of subscription to use Wikipedia for free!
    
+  
    
+
    `
+}
     @@ -99,6 +144,19 @@ data="{[ ` } +
    {
+`
+
+
+
+
+`
+}
     @@ -120,6 +178,22 @@ data="{[ ` } +
    {
+`
+
+
+
+
+
    
+  
    
+    
    Congratulations random Internet user!
    
+    
    You've been selected for a chance to get one year of subscription to use Wikipedia for free!
    
+    
    
+      
+    
    
+  
    
+
    `
+}
     @@ -141,4 +215,20 @@ data="{[ ` } +
    {
+`
+
+
+
+
+
    
+  
    
+    
    Congratulations random Internet user!
    
+    
    You've been selected for a chance to get one year of subscription to use Wikipedia for free!
    
+    
    
+      
+    
    
+  
    
+
    `
+}
     diff --git a/src/docs/src/routes/components/navbar.svelte.md b/src/docs/src/routes/components/navbar.svelte.md index 83ec4ab9d0f..f5f55955408 100644 --- a/src/docs/src/routes/components/navbar.svelte.md +++ b/src/docs/src/routes/components/navbar.svelte.md @@ -29,6 +29,11 @@ data="{[ daisyUI ` } +
    {
+`
    
+  daisyUI
+
    `
+}
    @@ -54,6 +59,18 @@ data="{[ ` } +
    {
+`
    
+  
    
+    daisyUI
+  
    
+  
    
+    
+  
    
+
    `
+}
     @@ -89,6 +106,23 @@ data="{[ ` } +
    {
+`
    
+  
    
+    
+  
    
+  
    
+    daisyUI
+  
    
+  
    
+    
+  
    
+
    `
+}
     @@ -136,6 +170,29 @@ data="{[ ` } +
    {
+`
    
+  
    
+    daisyUI
+  
    
+  
+
    `
+}
     @@ -195,6 +252,35 @@ data="{[ ` } +
    {
+`
    
+  
    
+    daisyUI
+  
    
+  
    
+    
    
+      
+    
    
+    
    
+      
+      
+    
    
+  
    
+
    `
+}
     @@ -282,6 +368,49 @@ data="{[ ` } +
    {
+`
    
+  
    
+    daisyUI
+  
    
+  
    
+    
    
+      
+      
    
+        
    
+          8 Items
+          Subtotal: $999
+          
    
+            
+          
    
+        
    
+      
    
+    
    
+    
    
+      
+      
+    
    
+  
    
+
    `
+}
     @@ -343,6 +472,36 @@ data="{[ ` } +
    {
+`
    
+  
    
+    
    
+      
+      
+    
    
+  
    
+  
    
+    daisyUI
+  
    
+  
    
+    
+    
+  
    
+
    `
+}
     @@ -434,6 +593,51 @@ data="{[ ` } +
    {
+`
    
+  
    
+    
    
+      
+      
+    
    
+    daisyUI
+  
    
+  
+  
+
    `
+}
     @@ -457,4 +661,15 @@ data="{[ daisyUI ` } +
    {
+`
    
+  daisyUI
+
    
+
    
+  daisyUI
+
    
+
    
+  daisyUI
+
    `
+}
     diff --git a/src/docs/src/routes/components/pagination.svelte.md b/src/docs/src/routes/components/pagination.svelte.md index 0581de56481..2f2f059069f 100644 --- a/src/docs/src/routes/components/pagination.svelte.md +++ b/src/docs/src/routes/components/pagination.svelte.md @@ -32,6 +32,14 @@ data="{[ ` } +
    {
+`
    
+  
+  
+  
+  
+
    `
+}
    @@ -87,6 +95,32 @@ data="{[ ` } +
    {
+`
    
+  
+  
+  
+  
+
    
+
    
+  
+  
+  
+  
+
    
+
    
+  
+  
+  
+  
+
    
+
    
+  
+  
+  
+  
+
    `
+}
     @@ -106,6 +140,15 @@ data="{[ ` } +
    {
+`
    
+  
+  
+  
+  
+  
+
    `
+}
     @@ -121,6 +164,13 @@ data="{[ ` } +
    {
+`
    
+  
+  
+  
+
    `
+}
     @@ -134,4 +184,10 @@ data="{[ ` } +
    {
+`
    
+  
+  
+
    `
+}
     diff --git a/src/docs/src/routes/components/progress.svelte.md b/src/docs/src/routes/components/progress.svelte.md index bfeb34602f8..582d0f7533b 100644 --- a/src/docs/src/routes/components/progress.svelte.md +++ b/src/docs/src/routes/components/progress.svelte.md @@ -39,6 +39,13 @@ data="{[ ` } +
    {
+`
+
+
+
+`
+}
    @@ -56,6 +63,13 @@ data="{[ ` } +
    {
+`
+
+
+
+`
+}
     @@ -73,6 +87,13 @@ data="{[ ` } +
    {
+`
+
+
+
+`
+}
     @@ -90,6 +111,13 @@ data="{[ ` } +
    {
+`
+
+
+
+`
+}
     @@ -107,6 +135,13 @@ data="{[ ` } +
    {
+`
+
+
+
+`
+}
     @@ -124,6 +159,13 @@ data="{[ ` } +
    {
+`
+
+
+
+`
+}
     @@ -141,6 +183,13 @@ data="{[ ` } +
    {
+`
+
+
+
+`
+}
     @@ -158,6 +207,13 @@ data="{[ ` } +
    {
+`
+
+
+
+`
+}
     @@ -165,4 +221,7 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
     diff --git a/src/docs/src/routes/components/radial-progress.svelte.md b/src/docs/src/routes/components/radial-progress.svelte.md index d4e231977b8..866320af3f6 100644 --- a/src/docs/src/routes/components/radial-progress.svelte.md +++ b/src/docs/src/routes/components/radial-progress.svelte.md @@ -33,6 +33,9 @@ data="{[ 
    {
 `
    70%
    `
 }
    +
    {
+`
    70%
    `
+}
    @@ -48,6 +51,13 @@ data="{[
    80%
    100%
    ` } +
    {
+`
    0%
    
+
    20%
    
+
    60%
    
+
    80%
    
+
    100%
    `
+}
     @@ -55,6 +65,9 @@ data="{[ 
    {
 `
    70%
    `
 }
    +
    {
+`
    70%
    `
+}
     @@ -62,13 +75,20 @@ data="{[ 
    {
 `
    70%
    `
 }
    +
    {
+`
    70%
    `
+}
    70%
    -
    80%
    +
    70%
    {
 `
    70%
    
-
    80%
    `
+
    70%
    `
+}
    +
    {
+`
    70%
    
+
    70%
    `
 }
     diff --git a/src/docs/src/routes/components/radio.svelte.md b/src/docs/src/routes/components/radio.svelte.md index 4b4e7ad74ad..18399c54c39 100644 --- a/src/docs/src/routes/components/radio.svelte.md +++ b/src/docs/src/routes/components/radio.svelte.md @@ -32,6 +32,10 @@ data="{[ ` ` } +
    {
+`
+`
+}
    @@ -41,6 +45,10 @@ data="{[ ` ` } +
    {
+`
+`
+}
     @@ -50,6 +58,10 @@ data="{[ ` ` } +
    {
+`
+`
+}
     @@ -59,6 +71,10 @@ data="{[ ` ` } +
    {
+`
+`
+}
     @@ -68,6 +84,10 @@ data="{[ ` ` } +
    {
+`
+`
+}
     @@ -99,4 +119,18 @@ data="{[ ` } +
    {
+`
    
+  
+
    
+
    
+  
+
    `
+}
     diff --git a/src/docs/src/routes/components/range.svelte.md b/src/docs/src/routes/components/range.svelte.md index c19b2f4a1e7..f818e151525 100644 --- a/src/docs/src/routes/components/range.svelte.md +++ b/src/docs/src/routes/components/range.svelte.md @@ -29,6 +29,9 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
    @@ -52,6 +55,16 @@ data="{[ | ` } +
    {
+`
+
    
+  |
+  |
+  |
+  |
+  |
+
    `
+}
     @@ -59,6 +72,9 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
     @@ -66,6 +82,9 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
     @@ -73,6 +92,9 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
     @@ -88,4 +110,10 @@ data="{[ ` } +
    {
+` 
+ 
+ 
+`
+}
     diff --git a/src/docs/src/routes/components/rating.svelte.md b/src/docs/src/routes/components/rating.svelte.md index 41e91fa4dca..0a694314a02 100644 --- a/src/docs/src/routes/components/rating.svelte.md +++ b/src/docs/src/routes/components/rating.svelte.md @@ -40,6 +40,15 @@ data="{[ ` } +
    {
+`
    
+  
+  
+  
+  
+  
+
    `
+}
    @@ -59,6 +68,15 @@ data="{[ ` } +
    {
+`
    
+  
+  
+  
+  
+  
+
    `
+}
     @@ -78,6 +96,15 @@ data="{[ ` } +
    {
+`
    
+  
+  
+  
+  
+  
+
    `
+}
     @@ -97,6 +124,15 @@ data="{[ ` } +
    {
+`
    
+  
+  
+  
+  
+  
+
    `
+}
     @@ -164,6 +200,40 @@ data="{[ ` } +
    {
+`
+
    
+  
+  
+  
+  
+  
+
    
+
+
    
+  
+  
+  
+  
+  
+
    
+
+
    
+  
+  
+  
+  
+  
+
    
+
+
    
+  
+  
+  
+  
+  
+
    `
+}
     @@ -185,6 +255,16 @@ data="{[ ` } +
    {
+`
    
+  
+  
+  
+  
+  
+  
+
    `
+}
     @@ -216,4 +296,19 @@ data="{[ ` } +
    {
+`
    
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
    `
+}
     diff --git a/src/docs/src/routes/components/select.svelte.md b/src/docs/src/routes/components/select.svelte.md index c75f6188015..2901b0b69d1 100644 --- a/src/docs/src/routes/components/select.svelte.md +++ b/src/docs/src/routes/components/select.svelte.md @@ -51,6 +51,16 @@ data="{[ ` } +
    {
+``
+}
    @@ -66,6 +76,13 @@ data="{[ ` } +
    {
+``
+}
     @@ -83,6 +100,14 @@ data="{[ ` } +
    {
+``
+}
     @@ -124,6 +149,26 @@ data="{[ ` } +
    {
+`
    
+  
+  
+  
+
    `
+}
     @@ -143,6 +188,15 @@ data="{[ ` } +
    {
+``
+}
     @@ -170,6 +224,19 @@ data="{[ ` } +
    {
+``
+}
     @@ -187,6 +254,14 @@ data="{[ ` } +
    {
+``
+}
     @@ -204,6 +279,14 @@ data="{[ ` } +
    {
+``
+}
     @@ -229,6 +312,18 @@ data="{[ ` } +
    {
+``
+}
     @@ -250,6 +345,16 @@ data="{[ ` } +
    {
+``
+}
     @@ -269,6 +374,15 @@ data="{[ ` } +
    {
+``
+}
     @@ -328,6 +442,36 @@ data="{[ ` } +
    {
+`
+
+
+
+
+
+
+`
+}
     @@ -339,4 +483,9 @@ data="{[ ` } +
    {
+``
+}
     diff --git a/src/docs/src/routes/components/stack.svelte.md b/src/docs/src/routes/components/stack.svelte.md index fbba2ed72bc..64755d79017 100644 --- a/src/docs/src/routes/components/stack.svelte.md +++ b/src/docs/src/routes/components/stack.svelte.md @@ -30,6 +30,13 @@ data="{[
    3
    ` } +
    {
+`
    
+  
    1
     
+  
    2
     
+  
    3
    
+
    `
+}
    @@ -45,6 +52,13 @@ data="{[
    3
    ` } +
    {
+`
    
+  
    1
     
+  
    2
     
+  
    3
    
+
    `
+}
     @@ -60,6 +74,13 @@ data="{[ Image 3 ` } +
    {
+`
    
+  Image 1
+  Image 2
+  Image 3
+
    `
+}
     @@ -87,6 +108,19 @@ data="{[ ` } +
    {
+`
    
+  
    
+    
    A
    
+  
     
+  
    
+    
    B
    
+  
     
+  
    
+    
    C
    
+  
    
+
    `
+}
     @@ -114,6 +148,19 @@ data="{[ ` } +
    {
+`
    
+  
    
+    
    A
    
+  
     
+  
    
+    
    B
    
+  
     
+  
    
+    
    C
    
+  
    
+
    `
+}
     @@ -159,4 +206,26 @@ data="{[ ` } +
    {
+`
    
+  
    
+    
    
+      
    Notification 1
     
+      
    You have 3 unread messages. Tap here to see.
    
+    
    
+  
     
+  
    
+    
    
+      
    Notification 2
     
+      
    You have 3 unread messages. Tap here to see.
    
+    
    
+  
     
+  
    
+    
    
+      
    Notification 3
     
+      
    You have 3 unread messages. Tap here to see.
    
+    
    
+  
    
+
    `
+}
     diff --git a/src/docs/src/routes/components/stat.svelte.md b/src/docs/src/routes/components/stat.svelte.md index 77aad3ea36b..97aaf6ca426 100644 --- a/src/docs/src/routes/components/stat.svelte.md +++ b/src/docs/src/routes/components/stat.svelte.md @@ -41,6 +41,17 @@ data="{[
    21% more than last month
    +` +} +
    {
+`
    
+  
+  
    
+    
    Total Page Views
    
+    
    89,400
    
+    
    21% more than last month
    
+  
    
+  
 
    `
 }
    @@ -110,6 +121,42 @@ data="{[
    31 tasks remaining
    +` +} +
    {
+`
    
+  
+  
    
+    
    
+      
+    
    
+    
    Total Likes
    
+    
    25.6K
    
+    
    21% more than last month
    
+  
    
+  
+  
    
+    
    
+      
+    
    
+    
    Page Views
    
+    
    2.6M
    
+    
    21% more than last month
    
+  
    
+  
+  
    
+    
    
+      
    
+        
    
+          
+        
    
+      
    
+    
    
+    
    86%
    
+    
    Tasks done
    
+    
    31 tasks remaining
    
+  
    
+  
 
    `
 }
    @@ -171,6 +218,38 @@ data="{[
    ↘︎ 90 (14%)
    +` +} +
    {
+`
    
+  
+  
    
+    
    
+      
+    
    
+    
    Downloads
    
+    
    31K
    
+    
    Jan 1st - Feb 1st
    
+  
    
+  
+  
    
+    
    
+      
+    
    
+    
    New Users
    
+    
    4,200
    
+    
    ↗︎ 400 (22%)
    
+  
    
+  
+  
    
+    
    
+      
+    
    
+    
    New Registers
    
+    
    1,200
    
+    
    ↘︎ 90 (14%)
    
+  
    
+  
 
    `
 }
    @@ -214,6 +293,29 @@ data="{[
    ↘︎ 90 (14%)
    +` +} +
    {
+`
    
+  
+  
    
+    
    Downloads
    
+    
    31K
    
+    
    From January 1st to February 1st
    
+  
    
+  
+  
    
+    
    Users
    
+    
    4,200
    
+    
    ↗︎ 40 (2%)
    
+  
    
+  
+  
    
+    
    New Registers
    
+    
    1,200
    
+    
    ↘︎ 90 (14%)
    
+  
    
+  
 
    `
 }
    @@ -257,6 +359,29 @@ data="{[
    ↘︎ 90 (14%)
    +` +} +
    {
+`
    
+  
+  
    
+    
    Downloads
    
+    
    31K
    
+    
    Jan 1st - Feb 1st
    
+  
    
+  
+  
    
+    
    New Users
    
+    
    4,200
    
+    
    ↗︎ 400 (22%)
    
+  
    
+  
+  
    
+    
    New Registers
    
+    
    1,200
    
+    
    ↘︎ 90 (14%)
    
+  
    
+  
 
    `
 }
    @@ -300,6 +425,29 @@ data="{[
    ↘︎ 90 (14%)
    +` +} +
    {
+`
    
+  
+  
    
+    
    Downloads
    
+    
    31K
    
+    
    Jan 1st - Feb 1st
    
+  
    
+  
+  
    
+    
    New Users
    
+    
    4,200
    
+    
    ↗︎ 400 (22%)
    
+  
    
+  
+  
    
+    
    New Registers
    
+    
    1,200
    
+    
    ↘︎ 90 (14%)
    
+  
    
+  
 
    `
 }
    @@ -342,6 +490,28 @@ data="{[ +` +} +
    {
+`
    
+  
+  
    
+    
    Account balance
    
+    
    $89,400
    
+    
    
+      
+    
    
+  
    
+  
+  
    
+    
    Current balance
    
+    
    $89,400
    
+    
    
+       
+      
+    
    
+  
    
+  
 
    `
 }
    diff --git a/src/docs/src/routes/components/steps.svelte.md b/src/docs/src/routes/components/steps.svelte.md index 91290ffc7e6..bb459d21583 100644 --- a/src/docs/src/routes/components/steps.svelte.md +++ b/src/docs/src/routes/components/steps.svelte.md @@ -42,6 +42,14 @@ data="{[
  • Receive Product
    • ` } +
    {
+`
      
+  
    • Register
      • 
+  
    • Choose plan
      • 
+  
    • Purchase
      • 
+  
    • Receive Product
      • 
+
    `
+}
    @@ -59,6 +67,14 @@ data="{[
  • Receive Product
    • ` } +
    {
+`
      
+  
    • Register
      • 
+  
    • Choose plan
      • 
+  
    • Purchase
      • 
+  
    • Receive Product
      • 
+
    `
+}
     @@ -76,6 +92,14 @@ data="{[
  • Receive Product
    • ` } +
    {
+`
      
+  
    • Register
      • 
+  
    • Choose plan
      • 
+  
    • Purchase
      • 
+  
    • Receive Product
      • 
+
    `
+}
     @@ -99,6 +123,17 @@ data="{[
  • Step 7
    • ` } +
    {
+`
      
+  
    • Step 1
      • 
+  
    • Step 2
      • 
+  
    • Step 3
      • 
+  
    • Step 4
      • 
+  
    • Step 5
      • 
+  
    • Step 6
      • 
+  
    • Step 7
      • 
+
    `
+}
     @@ -116,6 +151,14 @@ data="{[
  • Sit on toilet
    • ` } +
    {
+`
      
+  
    • Fly to moon
      • 
+  
    • Shrink the moon
      • 
+  
    • Grab the moon
      • 
+  
    • Sit on toilet
      • 
+
    `
+}
     @@ -177,4 +220,34 @@ data="{[ ` } +
    {
+`
    
+  
      
+    
    • start
      • 
+    
    • 2
      • 
+    
    • 3
      • 
+    
    • 4
      • 
+    
    • 5
      • 
+    
    • 6
      • 
+    
    • 7
      • 
+    
    • 8
      • 
+    
    • 9
      • 
+    
    • 10
      • 
+    
    • 11
      • 
+    
    • 12
      • 
+    
    • 13
      • 
+    
    • 14
      • 
+    
    • 15
      • 
+    
    • 16
      • 
+    
    • 17
      • 
+    
    • 18
      • 
+    
    • 19
      • 
+    
    • 20
      • 
+    
    • 21
      • 
+    
    • 22
      • 
+    
    • 23
      • 
+    
    • end
      • 
+  
    
+
    `
+}
     diff --git a/src/docs/src/routes/components/swap.svelte.md b/src/docs/src/routes/components/swap.svelte.md index b0c6e79e59e..046d169eb41 100644 --- a/src/docs/src/routes/components/swap.svelte.md +++ b/src/docs/src/routes/components/swap.svelte.md @@ -36,6 +36,13 @@ data="{[
    OFF
    ` } +
    {
+``
+}
    @@ -56,6 +63,20 @@ data="{[ +` +} +
    {
+``
 }
     @@ -78,6 +99,20 @@ data="{[ +` +} +
    {
+``
 }
    @@ -100,6 +135,20 @@ data="{[ +` +} +
    {
+``
 }
    @@ -119,6 +168,17 @@ data="{[
    😈
    😇
    +` +} +
    {
+``
 }
    @@ -142,4 +202,14 @@ data="{[
    😭
    ` } +
    {
+`
+`
+}
    diff --git a/src/docs/src/routes/components/tab.svelte.md b/src/docs/src/routes/components/tab.svelte.md index a560db6f325..e8722bbb149 100644 --- a/src/docs/src/routes/components/tab.svelte.md +++ b/src/docs/src/routes/components/tab.svelte.md @@ -39,6 +39,13 @@ data="{[ Tab 3 ` } +
    {
+`
    
+  Tab 1 
+  Tab 2 
+  Tab 3
+
    `
+}
    @@ -54,6 +61,13 @@ data="{[ Tab 3 ` } +
    {
+`
    
+  Tab 1 
+  Tab 2 
+  Tab 3
+
    `
+}
     @@ -69,6 +83,13 @@ data="{[ Tab 3 ` } +
    {
+`
    
+  Tab 1 
+  Tab 2 
+  Tab 3
+
    `
+}
     @@ -84,6 +105,13 @@ data="{[ Tab 3 ` } +
    {
+`
    
+  Tab 1 
+  Tab 2 
+  Tab 3
+
    `
+}
     @@ -135,4 +163,30 @@ data="{[ Large ` } +
    {
+`
+
    
+  Tiny 
+  Tiny 
+  Tiny
+
    
+
+
    
+  Small 
+  Small 
+  Small
+
    
+
+
+
+
    
+  Large 
+  Large 
+  Large
+
    `
+}
     diff --git a/src/docs/src/routes/components/table.svelte.md b/src/docs/src/routes/components/table.svelte.md index d3743756bb9..2eb889200f4 100644 --- a/src/docs/src/routes/components/table.svelte.md +++ b/src/docs/src/routes/components/table.svelte.md @@ -93,6 +93,44 @@ data="{[ ` } +
    {
+`
    
+  
+    
+    
+      
+        
+        
+        
+        
+      
+    
+    
+      
+      
+        
+        
+        
+        
+      
+      
+      
+        
+        
+        
+        
+      
+      
+      
+        
+        
+        
+        
+      
+    
+  
    NameJobFavorite Color
    1Cy GandertonQuality Control SpecialistBlue
    2Hart HagertyDesktop Support TechnicianPurple
    3Brice SwyreTax AccountantRed
    
+
    `
+}
    @@ -166,6 +204,44 @@ data="{[ ` } +
    {
+`
    
+  
+    
+    
+      
+        
+        
+        
+        
+      
+    
+    
+      
+      
+        
+        
+        
+        
+      
+      
+      
+        
+        
+        
+        
+      
+      
+      
+        
+        
+        
+        
+      
+    
+  
    NameJobFavorite Color
    1Cy GandertonQuality Control SpecialistBlue
    2Hart HagertyDesktop Support TechnicianPurple
    3Brice SwyreTax AccountantRed
    
+
    `
+}
     @@ -239,6 +315,44 @@ data="{[ ` } +
    {
+`
    
+  
+    
+    
+      
+        
+        
+        
+        
+      
+    
+    
+      
+      
+        
+        
+        
+        
+      
+      
+      
+        
+        
+        
+        
+      
+      
+      
+        
+        
+        
+        
+      
+    
+  
    NameJobFavorite Color
    1Cy GandertonQuality Control SpecialistBlue
    2Hart HagertyDesktop Support TechnicianPurple
    3Brice SwyreTax AccountantRed
    
+
    `
+}
     @@ -312,6 +426,44 @@ data="{[ ` } +
    {
+`
    
+  
+    
+    
+      
+        
+        
+        
+        
+      
+    
+    
+      
+      
+        
+        
+        
+        
+      
+      
+      
+        
+        
+        
+        
+      
+      
+      
+        
+        
+        
+        
+      
+    
+  
    NameJobFavorite Color
    1Cy GandertonQuality Control SpecialistBlue
    2Hart HagertyDesktop Support TechnicianPurple
    3Brice SwyreTax AccountantRed
    
+
    `
+}
     @@ -612,6 +764,159 @@ data="{[ ` } +
    {
+`
    
+  
+    
+    
+      
+        
+        
+        
+        
+        
+      
+    
+    
+      
+      
+        
+        
+        
+        
+        
+      
+      
+      
+        
+        
+        
+        
+        
+      
+      
+      
+        
+        
+        
+        
+        
+      
+      
+      
+        
+        
+        
+        
+        
+      
+    
+    
+    
+      
+        
+        
+        
+        
+        
+      
+    
+    
+  
    
+          
+        NameJobFavorite Color
    
+          
+        
+          
    
+            
    
+              
    
+                Avatar Tailwind CSS Component
+              
    
+            
    
+            
    
+              
    Hart Hagerty
    
+              
    United States
    
+            
    
+          
    
+            		
+          Zemlak, Daniel and Leannon
+          
    
+          Desktop Support Technician
+            		Purple
+          
+        
    
+          
+        
+          
    
+            
    
+              
    
+                Avatar Tailwind CSS Component
+              
    
+            
    
+            
    
+              
    Brice Swyre
    
+              
    China
    
+            
    
+          
    
+            		
+          Carroll Group
+          
    
+          Tax Accountant
+            		Red
+          
+        
    
+          
+        
+          
    
+            
    
+              
    
+                Avatar Tailwind CSS Component
+              
    
+            
    
+            
    
+              
    Marjy Ferencz
    
+              
    Russia
    
+            
    
+          
    
+            		
+          Rowe-Schoen
+          
    
+          Office Assistant I
+            		Crimson
+          
+        
    
+          
+        
+          
    
+            
    
+              
    
+                Avatar Tailwind CSS Component
+              
    
+            
    
+            
    
+              
    Yancy Tear
    
+              
    Brazil
    
+            
    
+          
    
+            		
+          Wyman-Ledner
+          
    
+          Community Outreach Specialist
+            		Indigo
+          
+        
    NameJobFavorite Color
    
+
    `
+}
     @@ -1033,4 +1338,214 @@ data="{[ ` } +
    {
+`
    
+  
+    
+      
+         
+         
+         
+         
+         
+         
+        
+      
+     
+    
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+      
+         
+         
+         
+         
+         
+         
+        
+      
+     
+    
+      
+         
+         
+         
+         
+         
+         
+        
+      
+    
+  
    NameJobcompanylocationLast LoginFavorite Color
    1Cy GandertonQuality Control SpecialistLittel, Schaden and VandervortCanada12/16/2020Blue
    2Hart HagertyDesktop Support TechnicianZemlak, Daniel and LeannonUnited States12/5/2020Purple
    3Brice SwyreTax AccountantCarroll GroupChina8/15/2020Red
    4Marjy FerenczOffice Assistant IRowe-SchoenRussia3/25/2021Crimson
    5Yancy TearCommunity Outreach SpecialistWyman-LednerBrazil5/22/2020Indigo
    6Irma VasilikEditorWiza, Bins and EmardVenezuela12/8/2020Purple
    7Meghann DurtnalStaff Accountant IVSchuster-SchimmelPhilippines2/17/2021Yellow
    8Sammy SestonAccountant IO'Hara, Welch and KeeblerIndonesia5/23/2020Crimson
    9Lesya TinhamSafety Technician IVTurner-KuhlmanPhilippines2/21/2021Maroon
    10Zaneta TewkesburyVP MarketingSauer LLCChad6/23/2020Green
    11Andy TippleLibrarianHilpert GroupPoland7/9/2020Indigo
    12Sophi BilesRecruiting ManagerGutmann IncIndonesia2/12/2021Maroon
    13Florida GarcesWeb Developer IVGaylord, Pacocha and BaumbachPoland5/31/2020Purple
    14Maribeth PoppingAnalyst ProgrammerDeckow-PourosPortugal4/27/2021Aquamarine
    15Moritz DryburghDental HygienistSchiller, Cole and HackettSri Lanka8/8/2020Crimson
    16Reid SemirasTeacherSporer, Sipes and RogahnPoland7/30/2020Green
    17Alec LethbyTeacherReichel, Glover and HamillChina2/28/2021Khaki
    18Aland WilberQuality Control SpecialistKshlerin, Rogahn and SwaniawskiCzech Republic9/29/2020Purple
    19Teddie DuerdenStaff Accountant IIIPouros, Ullrich and WindlerFrance10/27/2020Aquamarine
    20Lorelei BlackstoneData CoordiatorWitting, Kutch and GreenfelderKazakhstan6/3/2020Red
    NameJobcompanylocationLast LoginFavorite Color
    
+
    `
+}
     diff --git a/src/docs/src/routes/components/textarea.svelte.md b/src/docs/src/routes/components/textarea.svelte.md index 8f155996a4e..4d4419cac04 100644 --- a/src/docs/src/routes/components/textarea.svelte.md +++ b/src/docs/src/routes/components/textarea.svelte.md @@ -33,6 +33,9 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
    @@ -40,6 +43,9 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
     @@ -47,6 +53,9 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
     @@ -74,6 +83,19 @@ data="{[ ` } +
    {
+`
    
+   
+  
+   
+
    `
+}
     @@ -81,6 +103,9 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
     @@ -88,6 +113,9 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
     @@ -95,6 +123,9 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
     @@ -102,6 +133,9 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
     @@ -109,6 +143,9 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
     @@ -116,6 +153,9 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
     @@ -123,6 +163,9 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
     @@ -130,4 +173,7 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
     diff --git a/src/docs/src/routes/components/toast.svelte.md b/src/docs/src/routes/components/toast.svelte.md index d0127b236bc..e4cfe60a503 100644 --- a/src/docs/src/routes/components/toast.svelte.md +++ b/src/docs/src/routes/components/toast.svelte.md @@ -42,6 +42,15 @@ data="{[ ` } +
    {
+`
    
+  
    
+    
    
+      New message arrived.
+    
    
+  
    
+
    `
+}
    @@ -74,6 +83,20 @@ data="{[ ` } +
    {
+`
    
+  
    
+    
    
+      New mail arrived.
+    
    
+  
    
+  
    
+    
    
+      Message sent successfully.
+    
    
+  
    
+
    `
+}
    @@ -106,6 +129,20 @@ data="{[ ` } +
    {
+`
    
+  
    
+    
    
+      New mail arrived.
+    
    
+  
    
+  
    
+    
    
+      Message sent successfully.
+    
    
+  
    
+
    `
+}
    @@ -138,6 +175,20 @@ data="{[ ` } +
    {
+`
    
+  
    
+    
    
+      New mail arrived.
+    
    
+  
    
+  
    
+    
    
+      Message sent successfully.
+    
    
+  
    
+
    `
+}
    @@ -170,6 +221,20 @@ data="{[ ` } +
    {
+`
    
+  
    
+    
    
+      New mail arrived.
+    
    
+  
    
+  
    
+    
    
+      Message sent successfully.
+    
    
+  
    
+
    `
+}
    @@ -202,6 +267,20 @@ data="{[ ` } +
    {
+`
    
+  
    
+    
    
+      New mail arrived.
+    
    
+  
    
+  
    
+    
    
+      Message sent successfully.
+    
    
+  
    
+
    `
+}
    @@ -234,6 +313,20 @@ data="{[ ` } +
    {
+`
    
+  
    
+    
    
+      New mail arrived.
+    
    
+  
    
+  
    
+    
    
+      Message sent successfully.
+    
    
+  
    
+
    `
+}
    @@ -266,6 +359,20 @@ data="{[ ` } +
    {
+`
    
+  
    
+    
    
+      New mail arrived.
+    
    
+  
    
+  
    
+    
    
+      Message sent successfully.
+    
    
+  
    
+
    `
+}
    @@ -298,6 +405,20 @@ data="{[ ` } +
    {
+`
    
+  
    
+    
    
+      New mail arrived.
+    
    
+  
    
+  
    
+    
    
+      Message sent successfully.
+    
    
+  
    
+
    `
+}
    @@ -330,5 +451,19 @@ data="{[ ` } +
    {
+`
    
+  
    
+    
    
+      New mail arrived.
+    
    
+  
    
+  
    
+    
    
+      Message sent successfully.
+    
    
+  
    
+
    `
+}
    diff --git a/src/docs/src/routes/components/toggle.svelte.md b/src/docs/src/routes/components/toggle.svelte.md index 5a4e8a15d4f..74d442cf333 100644 --- a/src/docs/src/routes/components/toggle.svelte.md +++ b/src/docs/src/routes/components/toggle.svelte.md @@ -31,6 +31,9 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
    @@ -48,6 +51,14 @@ data="{[ ` } +
    {
+`
    
+  
+
    `
+}
     @@ -65,6 +76,14 @@ data="{[ ` } +
    {
+`
    
+  
+
    `
+}
     @@ -82,6 +101,14 @@ data="{[ ` } +
    {
+`
    
+  
+
    `
+}
     @@ -99,6 +126,14 @@ data="{[ ` } +
    {
+`
    
+  
+
    `
+}
     @@ -114,6 +149,12 @@ data="{[ ` } +
    {
+`
+
+
+`
+}
     @@ -121,6 +162,9 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
     @@ -128,6 +172,9 @@ data="{[ 
    {
 ``
 }
    +
    {
+``
+}
     @@ -139,4 +186,11 @@ data="{[ ` } +
    {
+`
+
+`
+}
     diff --git a/src/docs/src/routes/components/tooltip.svelte.md b/src/docs/src/routes/components/tooltip.svelte.md index 8a24183fe67..04b7c5d33ed 100644 --- a/src/docs/src/routes/components/tooltip.svelte.md +++ b/src/docs/src/routes/components/tooltip.svelte.md @@ -39,6 +39,11 @@ data="{[ ` } +
    {
+`
    
+  
+
    `
+}
    @@ -52,6 +57,11 @@ data="{[ ` } +
    {
+`
    
+  
+
    `
+}
     @@ -65,6 +75,11 @@ data="{[ ` } +
    {
+`
    
+  
+
    `
+}
     @@ -78,6 +93,11 @@ data="{[ ` } +
    {
+`
    
+  
+
    `
+}
     @@ -91,6 +111,11 @@ data="{[ ` } +
    {
+`
    
+  
+
    `
+}
     @@ -104,6 +129,11 @@ data="{[ ` } +
    {
+`
    
+  
+
    `
+}
     @@ -117,6 +147,11 @@ data="{[ ` } +
    {
+`
    
+  
+
    `
+}
     @@ -130,6 +165,11 @@ data="{[ ` } +
    {
+`
    
+  
+
    `
+}
     @@ -143,6 +183,11 @@ data="{[ ` } +
    {
+`
    
+  
+
    `
+}
     @@ -156,6 +201,11 @@ data="{[ ` } +
    {
+`
    
+  
+
    `
+}
     @@ -169,6 +219,11 @@ data="{[ ` } +
    {
+`
    
+  
+
    `
+}
     @@ -182,4 +237,9 @@ data="{[ ` } +
    {
+`
    
+  
+
    `
+}
     From 252c167149a8e58fefaf7814f879153016e9726d Mon Sep 17 00:00:00 2001 From: Deyan Petrov Date: Thu, 1 Sep 2022 09:13:46 +0200 Subject: [PATCH 09/11] Update mockup-code.svelte.md --- .../routes/components/mockup-code.svelte.md | 52 ++++++------------- 1 file changed, 16 insertions(+), 36 deletions(-) diff --git a/src/docs/src/routes/components/mockup-code.svelte.md b/src/docs/src/routes/components/mockup-code.svelte.md index 6d2dc9583b1..484e3562f91 100644 --- a/src/docs/src/routes/components/mockup-code.svelte.md +++ b/src/docs/src/routes/components/mockup-code.svelte.md @@ -20,16 +20,14 @@ data="{[ 
    npm i daisyui
    - 
    npm i daisyui
    {
 `
    
   
    npm i daisyui
    
-
    {
-`
    
-  
    npm i daisyui
    
 
    `
 }
    
+
    {
+`
    
   
    npm i daisyui
    
 
    `
 }
    
@@ -37,27 +35,21 @@ data="{[
 
 
 
    
-  
    npm i daisyui
    
   
    npm i daisyui
    
   
    installing...
    
-  
    installing...
    
   
    Done!
    
-  
    Done!
    
 
    
 
    {
 `
    
   
    npm i daisyui
     
-
    {
-`
    
-  
    npm i daisyui
     
   
    installing...
     
-  
    npm i daisyui
     
-  
    installing...
     
   
    Done!
    
-  
    installing...
     
-  
    Done!
    
 
    `
 }
    
+
    {
+`
    
+  
    npm i daisyui
     
+  
    installing...
     
   
    Done!
    
 
    `
 }
    
@@ -65,27 +57,21 @@ data="{[
 
 
 
    
-  
    npm i daisyui
     
   
    npm i daisyui
     
   
    installing...
     
-  
    installing...
     
   
    Error!
    
-  
    Error!
    
 
    
 
    {
 `
    
   
    npm i daisyui
     
-
    {
-`
    
-  
    npm i daisyui
     
-  
    installing...
     
-  
    npm i daisyui
     
   
    installing...
     
   
    Error!
    
-  
    installing...
     
-  
    Error!
    
 
    `
 }
    
+
    {
+`
    
+  
    npm i daisyui
     
+  
    installing...
     
   
    Error!
    
 
    `
 }
    
@@ -94,16 +80,14 @@ data="{[
 
 
    
   
    Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.
    
-  
    Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.
    
 
    
 
    {
 `
    
   
    Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.
    
-
    {
-`
    
-  
    Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.
    
 
    `
 }
    
+
    {
+`
    
   
    Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.
    
 
    `
 }
    
@@ -112,16 +96,14 @@ data="{[
 
 
    
   
    without prefix
    
-  
    without prefix
    
 
    
 
    {
 `
    
   
    without prefix
    
-
    {
-`
    
-  
    without prefix
    
 
    `
 }
    
+
    {
+`
    
   
    without prefix
    
 
    `
 }
    
@@ -130,16 +112,14 @@ data="{[
 
 
    
   
    can be any color!
    
-  
    can be any color!
    
 
    
 
    {
 `
    
   
    can be any color!
    
-
    {
-`
    
-  
    can be any color!
    
 
    `
 }
    
+
    {
+`
    
   
    can be any color!
    
 
    `
 }
    

From d32ec9fc049152a6877cba758a8d68f4407f8caf Mon Sep 17 00:00:00 2001
From: Deyan Petrov 
Date: Thu, 1 Sep 2022 09:25:00 +0200
Subject: [PATCH 10/11] JSX Syntax

---
 .../src/routes/components/collapse.svelte.md  | 28 +++++-----
 .../src/routes/components/dropdown.svelte.md  | 54 +++++++++----------
 2 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/src/docs/src/routes/components/collapse.svelte.md b/src/docs/src/routes/components/collapse.svelte.md
index 155bfa303b1..053bad43d5a 100644
--- a/src/docs/src/routes/components/collapse.svelte.md
+++ b/src/docs/src/routes/components/collapse.svelte.md
@@ -43,12 +43,12 @@ data="{[
 
    `
 }
    
 
    {
-`
     
+`
     
   
    
     Focus me to see content
   
    
   
     
-    
    tabindex="0" attribute is necessary to make the div focusable
    
+    
    tabindex={0} attribute is necessary to make the div focusable
    
   
    
 
    `
 }
    
@@ -108,12 +108,12 @@ data="{[
 
    `
 }
    
 
    {
-`
     
+`
     
   
    
     Focus me to see content
   
    
   
     
-    
    tabindex="0" attribute is necessary to make the div focusable
    
+    
    tabindex={0} attribute is necessary to make the div focusable
    
   
    
 
    `
 }
    
@@ -139,12 +139,12 @@ data="{[
 
    `
 }
    
 
    {
-`
    
+`
    
   
    
     Focus me to see content
   
    
   
     
-    
    tabindex="0" attribute is necessary to make the div focusable
    
+    
    tabindex={0} attribute is necessary to make the div focusable
    
   
    
 
    `
 }
    
@@ -170,12 +170,12 @@ data="{[
 
    `
 }
    
 
    {
-`
    
+`
    
   
    
     Focus me to see content
   
    
   
     
-    
    tabindex="0" attribute is necessary to make the div focusable
    
+    
    tabindex={0} attribute is necessary to make the div focusable
    
   
    
 
    `
 }
    
@@ -201,12 +201,12 @@ data="{[
 
    `
 }
    
 
    {
-`
     
+`
     
   
    
     I have collapse-open className
   
    
   
     
-    
    tabindex="0" attribute is necessary to make the div focusable
    
+    
    tabindex={0} attribute is necessary to make the div focusable
    
   
    
 
    `
 }
    
@@ -232,12 +232,12 @@ data="{[
 
    `
 }
    {
-`
     
+`
     
   
    
     I have collapse-close className
   
    
   
     
-    
    tabindex="0" attribute is necessary to make the div focusable
    
+    
    tabindex={0} attribute is necessary to make the div focusable
    
   
    
 
    `
 }
    @@ -263,12 +263,12 @@ data="{[ ` } 
    {
-`
    
+`
    
   
    
     Focus me to see content
   
    
   
     
-    
    tabindex="0" attribute is necessary to make the div focusable
    
+    
    tabindex={0} attribute is necessary to make the div focusable
    
   
    
 
    `
 }
    diff --git a/src/docs/src/routes/components/dropdown.svelte.md b/src/docs/src/routes/components/dropdown.svelte.md index b2c274bd100..1a567c407c0 100644 --- a/src/docs/src/routes/components/dropdown.svelte.md +++ b/src/docs/src/routes/components/dropdown.svelte.md @@ -57,8 +57,8 @@ data="{[ } 
    {
 `
    
-  
-  
    {
 `
    
-  
-  
    {
 `
    
-  
-  
    {
 `
    
-  
-  
    {
 `
    
-  
-  
    {
 `
    
-  
-  
    {
 `
    
-  
-  
    {
 `
    
-  
-  
    {
 `
    
-  
-  
    {
 `
    
-  
-  
    {
 `
    
-  
-  
    
+  
+  
    
     
    
       
    Card title!
    
       
    you can use any element as a dropdown.
    
@@ -398,8 +398,8 @@ data="{[
     
    
       Button
       
    
-        
-