From e03fe2eda022a098ad815da230c6935cbc5b03a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20R=C3=B6schke?= Date: Sat, 4 Mar 2023 10:42:11 +0100 Subject: [PATCH 1/9] Emtpy commit to create Draft PR From 94b30542235f7b314c28047f9fb5e8ca167d2529 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20R=C3=B6schke?= Date: Sat, 4 Mar 2023 11:17:04 +0100 Subject: [PATCH 2/9] Completed rewrite of introduction except the first vision paragraph --- .../(inner)/docs/introduction/+page.svelte | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/routes/(inner)/docs/introduction/+page.svelte b/src/routes/(inner)/docs/introduction/+page.svelte index 3c4bbfd65..bf680b462 100644 --- a/src/routes/(inner)/docs/introduction/+page.svelte +++ b/src/routes/(inner)/docs/introduction/+page.svelte @@ -20,7 +20,7 @@

- Skeleton utilizes Tailwind’s utility classes and design system capabilities quickly and easily create beautiful interfaces. Paired + Skeleton utilizes Tailwind’s utility classes and design system capabilities to quickly and easily create beautiful interfaces. Paired with Svelte’s powerful component architecture, Skeleton creates customized, responsive, and reactive interfaces for projects of any scope or scale.

@@ -39,9 +39,9 @@

Our Vision

- The goal of Skeleton is to create intelligent, adaptive UI that automatically adheres to your applications unique aesthetic. Utilizing - native browser APIs and elements, such as form elements, when possible. While also augmenting this with powerful components built to - follow WAI-ARIA guidelines for accessibility. + The goal of Skeleton is to create intelligent, adaptive UI that automatically adheres to your applications unique aesthetic. + Utilizing native browser APIs and elements, such as form elements, when possible. + While also augmenting this with powerful components built to follow WAI-ARIA guidelines for accessibility.

We're huge fans of Svelte and wish to contribute to this amazing ecosystem. We believe this only happens through contributions of high @@ -49,7 +49,7 @@

Finally, we aim for inclusion, whether you're a contributor to the project, a consumer, or the end user. The Skeleton core team is not - a faceless corporate entity, but rather a small group of individuals motivated to make accessible UI with great UX for all. + a faceless corporate entity, but rather a small group of individuals motivated to make accessible UI with great UX (and DX!) for all.

@@ -73,14 +73,14 @@

Theme System

We provide a powerful and comprehensive theme system that goes well beyond generating a color palette. Themes allow you to control - common settings, such as border radius, and apply that universally throughout your application. Furthermore, themes are built using - CSS variables, which makes theme simple to configure and reuse. + common settings, such as border radius, and apply those universally throughout your application. Furthermore, themes are built using + CSS variables, which makes themes simple to configure and reuse.

Design Tokens

A special set of CSS classes that ingest your theme settings for easy reuse throughout your design system. These are used as the - default settings for most features within Skeleton, meaning your UI elements automatically adjust to theme adjustments. Likewise, + default settings for most features within Skeleton, meaning your UI elements automatically adjust to theme changes. Likewise, these tokens are available to you, meaning you can build custom components using the same tools we do, for a truly cohesive look and feel.

@@ -107,8 +107,8 @@

A library of UI elements created by the creators of Tailwind CSS. This provides a huge library of turnkey HTML/CSS components. Currently Tailwind UI supports three options: HTML, React, and Vue. This means there's no plug and play solution for Svelte. You - willneed to generate your own components and build your own logic around these. Tailwind UI can be directly integrated with - Skeleton though, providing tight integration with Skeleton theme and design token systems. + will need to generate your own components and build your own logic around these. Tailwind UI can be directly integrated with + Skeleton though, providing tight integration with Skeletons theme and design token systems.

View our Integration Guide @@ -122,7 +122,7 @@ and opinionated design aesthetic and serves as a general purpose library, which means it can be used within any framework, while providing framework-specific variations like Flowbite Svelte. Flowbite's HTML/CSS elements can be directly integrated with Skeleton though, providing tight integration with Skeleton theme + >. Flowbite's HTML/CSS elements can be directly integrated with Skeleton though, providing tight integration with Skeletons theme and design token systems.

View our Integration Guide @@ -206,7 +206,7 @@

We recommend the official documentation and - tutorial for Svelte. As well as the official + tutorial for Svelte and SvelteKit. As well as the official documentation for SvelteKit.

From 965e565c97a1b4d96a06c7dfcc9b2c504bc644be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20R=C3=B6schke?= Date: Sat, 4 Mar 2023 11:27:46 +0100 Subject: [PATCH 3/9] Rewrote introdcutionary vision paragraph with AI help. --- src/routes/(inner)/docs/introduction/+page.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/(inner)/docs/introduction/+page.svelte b/src/routes/(inner)/docs/introduction/+page.svelte index bf680b462..a7a514f0d 100644 --- a/src/routes/(inner)/docs/introduction/+page.svelte +++ b/src/routes/(inner)/docs/introduction/+page.svelte @@ -39,9 +39,9 @@

Our Vision

- The goal of Skeleton is to create intelligent, adaptive UI that automatically adheres to your applications unique aesthetic. - Utilizing native browser APIs and elements, such as form elements, when possible. - While also augmenting this with powerful components built to follow WAI-ARIA guidelines for accessibility. + Skeleton aims to provide a seamless user experience by creating intelligent and adaptive UI elements that automatically conform to the unique aesthetic of your application. + It leverages native browser APIs and form elements, while also incorporating powerful components that follow WAI-ARIA guidelines for accessibility, + empowering developers to create user-friendly and inclusive web applications with ease.

We're huge fans of Svelte and wish to contribute to this amazing ecosystem. We believe this only happens through contributions of high From 036699e6f1510a65188d8d7ddb83b17c0a95245f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20R=C3=B6schke?= Date: Sat, 4 Mar 2023 11:35:02 +0100 Subject: [PATCH 4/9] Updated Getting Started. --- src/routes/(inner)/docs/get-started/SectionInstall.svelte | 2 +- src/routes/(inner)/docs/get-started/SectionStylesheets.svelte | 2 +- src/routes/(inner)/docs/get-started/SectionThemes.svelte | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/(inner)/docs/get-started/SectionInstall.svelte b/src/routes/(inner)/docs/get-started/SectionInstall.svelte index 6ca80dddd..6020f0ac6 100644 --- a/src/routes/(inner)/docs/get-started/SectionInstall.svelte +++ b/src/routes/(inner)/docs/get-started/SectionInstall.svelte @@ -30,7 +30,7 @@ cd my-skeleton-app {:else if $storeOnboardMethod === 'manual'}

- If you have an existing SvelteKit application, start here. Otherwise let's begin by creating a new SvelteKit project. + If you have an existing SvelteKit application, skip to installing the Skeleton package from NPM. Otherwise let's begin by creating a new SvelteKit project.

-

The order shown is critical to ensure these work as expected. Please use care when adding or modifying these.

+

The order shown is critical to ensure these work as expected. Please be careful when adding or modifying these!

{#if $storeOnboardMethod === 'cli'}

- The CLI will automatically import your prefer preset theme in src/routes/+layout.svelte. You may change this at any time. + The CLI will automatically import your preferred preset theme in src/routes/+layout.svelte. You may change this at any time.

{:else if $storeOnboardMethod === 'manual'} From 65568b423db1c71bb404a1f6fc75556f13db6030 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20R=C3=B6schke?= Date: Sat, 4 Mar 2023 11:41:20 +0100 Subject: [PATCH 5/9] Fixed possessive 's for Skeleton's design token system --- src/routes/(inner)/docs/introduction/+page.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/(inner)/docs/introduction/+page.svelte b/src/routes/(inner)/docs/introduction/+page.svelte index a7a514f0d..4ff19ec88 100644 --- a/src/routes/(inner)/docs/introduction/+page.svelte +++ b/src/routes/(inner)/docs/introduction/+page.svelte @@ -108,7 +108,7 @@ A library of UI elements created by the creators of Tailwind CSS. This provides a huge library of turnkey HTML/CSS components. Currently Tailwind UI supports three options: HTML, React, and Vue. This means there's no plug and play solution for Svelte. You will need to generate your own components and build your own logic around these. Tailwind UI can be directly integrated with - Skeleton though, providing tight integration with Skeletons theme and design token systems. + Skeleton though, providing tight integration with Skeleton's theme and design token systems.

View our Integration Guide @@ -122,7 +122,7 @@ and opinionated design aesthetic and serves as a general purpose library, which means it can be used within any framework, while providing framework-specific variations like Flowbite Svelte. Flowbite's HTML/CSS elements can be directly integrated with Skeleton though, providing tight integration with Skeletons theme + >. Flowbite's HTML/CSS elements can be directly integrated with Skeleton though, providing tight integration with Skeleton's theme and design token systems.

View our Integration Guide From 1bdcd348a8728d4bef78b6adce2fde56472195e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20R=C3=B6schke?= Date: Sat, 4 Mar 2023 11:43:05 +0100 Subject: [PATCH 6/9] Checked the Colors page. --- src/routes/(inner)/docs/colors/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/(inner)/docs/colors/+page.svelte b/src/routes/(inner)/docs/colors/+page.svelte index b941d8fe2..13256094e 100644 --- a/src/routes/(inner)/docs/colors/+page.svelte +++ b/src/routes/(inner)/docs/colors/+page.svelte @@ -18,7 +18,7 @@ '[style]-success-[50-900]', 'Used for successful or positive actions, such as a form submit alert.' ], - [`
`, '[style]-warning-[50-900]', 'Used for negative or harmful actions, such as errors.'], + [`
`, '[style]-warning-[50-900]', 'Used for negative or harmful actions, such as warnings or errors.'], [`
`, '[style]-error-[50-900]', 'May be used for errors, alerts, and invalid inputs.'], [`
`, '[style]-surface-[50-900]', 'The base level colors, used for backgrounds.'] ] From 9b5035ad16506c2d6c24c8c543b88aeaa94a1ad3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20R=C3=B6schke?= Date: Sat, 4 Mar 2023 11:51:36 +0100 Subject: [PATCH 7/9] Updated Design Tokens Page. --- src/routes/(inner)/docs/tokens/+page.svelte | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/routes/(inner)/docs/tokens/+page.svelte b/src/routes/(inner)/docs/tokens/+page.svelte index de05355db..ac5f011fd 100644 --- a/src/routes/(inner)/docs/tokens/+page.svelte +++ b/src/routes/(inner)/docs/tokens/+page.svelte @@ -43,7 +43,7 @@ const tableBorder: TableSource = { head: headings, body: [ - ['.border-token', '', 'Implements your theme configured border size.'], + ['.border-token', '', 'Implements your theme\'s configured border size.'], ['.border-[color]-[pairings]-token', `${vColorsAll}
${vPairings}`, descPairings] ] }; @@ -64,9 +64,9 @@ const tableText: TableSource = { head: headings, body: [ - ['.font-heading-token', '', 'Implements your theme configured heading text size.'], - ['.font-token', '', 'Implements your theme configured base text size.'], - ['.text-token', '', 'Implements your theme configured base text color.'], + ['.font-heading-token', '', 'Implements your theme\'s configured heading text size.'], + ['.font-token', '', 'Implements your theme\'s configured base text size.'], + ['.text-token', '', 'Implements your theme\'s configured base text color.'], ['.text-on-[color]-token', vColorsAll, 'Provides an accessible foreground color.'], ['.text-[color]-[pairings]-token', `${vColorsAll}
${vPairings}`, descPairings] ] @@ -91,7 +91,7 @@

Skeleton utilizes a simple but powerful design token system to implement theme settings in elements and components. These represent the defaults for most elements and components, which means they auto-adapt based on your theme with minimal configuration - out of the box. Best of all you can use these within your custom components as well. + out of the box. Best of all you can use these within your custom components as well!

@@ -110,7 +110,7 @@

Theme Flow

Below is a visualization of how Skeleton uses your theme to control your UI. We start with your theme's CSS variables, then - construct design token classes from these, next components utilize these design token classes, then finally you construct your pages + construct design token classes based on these variables, next components utilize these design token classes, then finally you construct your pages with sets of elements and components.

Date: Sat, 4 Mar 2023 11:56:15 +0100 Subject: [PATCH 8/9] Updated Theme Generator --- src/routes/(inner)/docs/generator/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/(inner)/docs/generator/+page.svelte b/src/routes/(inner)/docs/generator/+page.svelte index cf3d83adb..85d548ae7 100644 --- a/src/routes/(inner)/docs/generator/+page.svelte +++ b/src/routes/(inner)/docs/generator/+page.svelte @@ -27,7 +27,7 @@

Importing Your Theme

Copy and paste your theme CSS into /src/theme.postcss, then import the theme into your root layout in - /src/routes/+layout.svelte. Keep the order as shown. + /src/routes/+layout.svelte instead of a premade Skeleton theme. Keep the order as shown.

Date: Sat, 4 Mar 2023 12:45:49 -0600 Subject: [PATCH 9/9] Modifications by Chris --- src/routes/(inner)/docs/colors/+page.svelte | 2 +- .../(inner)/docs/introduction/+page.svelte | 21 ++++++++++--------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/routes/(inner)/docs/colors/+page.svelte b/src/routes/(inner)/docs/colors/+page.svelte index 13256094e..fe47e1081 100644 --- a/src/routes/(inner)/docs/colors/+page.svelte +++ b/src/routes/(inner)/docs/colors/+page.svelte @@ -18,7 +18,7 @@ '[style]-success-[50-900]', 'Used for successful or positive actions, such as a form submit alert.' ], - [`
`, '[style]-warning-[50-900]', 'Used for negative or harmful actions, such as warnings or errors.'], + [`
`, '[style]-warning-[50-900]', 'Used for negative or harmful actions, such as warnings.'], [`
`, '[style]-error-[50-900]', 'May be used for errors, alerts, and invalid inputs.'], [`
`, '[style]-surface-[50-900]', 'The base level colors, used for backgrounds.'] ] diff --git a/src/routes/(inner)/docs/introduction/+page.svelte b/src/routes/(inner)/docs/introduction/+page.svelte index 4ff19ec88..7f3c85ea7 100644 --- a/src/routes/(inner)/docs/introduction/+page.svelte +++ b/src/routes/(inner)/docs/introduction/+page.svelte @@ -39,9 +39,9 @@

Our Vision

- Skeleton aims to provide a seamless user experience by creating intelligent and adaptive UI elements that automatically conform to the unique aesthetic of your application. - It leverages native browser APIs and form elements, while also incorporating powerful components that follow WAI-ARIA guidelines for accessibility, - empowering developers to create user-friendly and inclusive web applications with ease. + Skeleton aims to provide a seamless user experience by creating intelligent and adaptive UI elements that automatically conform to the + unique aesthetic of your application. It leverages native browser APIs and form elements, while also incorporating powerful components + that follow WAI-ARIA guidelines for accessibility, empowering developers to create user-centric web applications with ease.

We're huge fans of Svelte and wish to contribute to this amazing ecosystem. We believe this only happens through contributions of high @@ -49,7 +49,8 @@

Finally, we aim for inclusion, whether you're a contributor to the project, a consumer, or the end user. The Skeleton core team is not - a faceless corporate entity, but rather a small group of individuals motivated to make accessible UI with great UX (and DX!) for all. + a faceless corporate entity, but rather a small group of individuals motivated to make accessible UI with great UX (user experience) + and DX (developer experience) for all.

@@ -80,9 +81,8 @@

Design Tokens

A special set of CSS classes that ingest your theme settings for easy reuse throughout your design system. These are used as the - default settings for most features within Skeleton, meaning your UI elements automatically adjust to theme changes. Likewise, - these tokens are available to you, meaning you can build custom components using the same tools we do, for a truly cohesive look and - feel. + default settings for most features within Skeleton, meaning your UI elements automatically adjust to theme changes. Likewise, these + tokens are available to you, meaning you can build custom components using the same tools we do, for a truly cohesive look and feel.

Release Cycle

@@ -122,8 +122,8 @@ and opinionated design aesthetic and serves as a general purpose library, which means it can be used within any framework, while providing framework-specific variations like Flowbite Svelte. Flowbite's HTML/CSS elements can be directly integrated with Skeleton though, providing tight integration with Skeleton's theme - and design token systems. + >. Flowbite's HTML/CSS elements can be directly integrated with Skeleton though, providing tight integration with Skeleton's + theme and design token systems.

View our Integration Guide @@ -206,7 +206,8 @@

We recommend the official documentation and - tutorial for Svelte and SvelteKit. As well as the official + tutorial for Svelte and + SvelteKit. As well as the official documentation for SvelteKit.