markbattistella · markbattistella · May 3, 2024 · May 3, 2024 · May 3, 2024
diff --git a/.github/data/iOS.png b/.github/data/iOS.png
diff --git a/.github/data/iPadOS.png b/.github/data/iPadOS.png
diff --git a/.github/data/tvOS.png b/.github/data/tvOS.png
diff --git a/.github/data/visionOS.png b/.github/data/visionOS.png
diff --git a/Documentation/icons/android-chrome-192x192.png b/Documentation/icons/android-chrome-192x192.png
diff --git a/Documentation/icons/android-chrome-256x256.png b/Documentation/icons/android-chrome-256x256.png
diff --git a/Documentation/icons/apple-touch-icon.png b/Documentation/icons/apple-touch-icon.png
diff --git a/Documentation/icons/browserconfig.xml b/Documentation/icons/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/icons/mstile-150x150.png"/>
+            <TileColor>#603cba</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/Documentation/icons/favicon-16x16.png b/Documentation/icons/favicon-16x16.png
diff --git a/Documentation/icons/favicon-32x32.png b/Documentation/icons/favicon-32x32.png
diff --git a/Documentation/icons/favicon.ico b/Documentation/icons/favicon.ico
diff --git a/Documentation/icons/mstile-150x150.png b/Documentation/icons/mstile-150x150.png
diff --git a/Documentation/icons/site.webmanifest b/Documentation/icons/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "ContrastKit",
+    "short_name": "ContrastKit",
+    "icons": [
+        {
+            "src": "/icons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/icons/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/Documentation/index.html b/Documentation/index.html
@@ -1,18 +1,47 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-	<title>ContrastKit: Apple Swift Package</title>
 	<meta charset="UTF-8">
+	<title>ContrastKit: Apple Swift Package</title>
+	<meta name="twitter:title" content="ContrastKit: Apple Swift Package">
+	<meta property="og:title" content="ContrastKit: Apple Swift Package">
+	<meta property="og:site_name" content="ContrastKit: Apple Swift Package">
+	<link rel="canonical" href="https://contrastkit.markbattistella.com">
+	<meta name="twitter:url" content="https://contrastkit.markbattistella.com">
+	<meta property="og:url" content="https://contrastkit.markbattistella.com">
 	<meta name="description" content="ContrastKit is a Swift library designed to facilitate colour contrast handling within iOS, iPadOS, macOS, and tvOS applications. It provides developers with tools to automatically generate colour shades from any base colour and determine the most readable contrast colours according to established accessibility standards (AA Large, AA, and AAA).">
-	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+	<meta name="twitter:description" content="ContrastKit is a Swift library designed to facilitate colour contrast handling within iOS, iPadOS, macOS, and tvOS applications. It provides developers with tools to automatically generate colour shades from any base colour and determine the most readable contrast colours according to established accessibility standards (AA Large, AA, and AAA).">
+	<meta property="og:description" content="ContrastKit is a Swift library designed to facilitate colour contrast handling within iOS, iPadOS, macOS, and tvOS applications. It provides developers with tools to automatically generate colour shades from any base colour and determine the most readable contrast colours according to established accessibility standards (AA Large, AA, and AAA).">
+	<meta name="keywords" content="swift,swiftui,colour,color,ios,macos,visionos,tvos,themes,theming,design,ui">
+	<meta name="copyright" content="Mark Battistella">
+	<meta name="author" content="Mark Battistella">
+	<meta name="language" content="en-au">
+	<meta name="twitter:card" content="summary_large_image">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+	<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png?2024.05">
+	<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png?2024.05">
+	<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png?2024.05">
+	<link rel="manifest" href="/icons/site.webmanifest?2024.05">
+	<meta name="msapplication-TileColor" content="#603cba">
+	<meta name="theme-color" content="#ffffff">
+	<link rel="shortcut icon" href="/icons/favicon.ico?2024.05">
+	<meta name="apple-mobile-web-app-title" content="ContrastKit">
+	<meta name="application-name" content="ContrastKit">
+	<meta name="msapplication-config" content="/icons/browserconfig.xml?2024.05">
+	<meta name="theme-color" content="rgb(17, 17, 17)" media="(prefers-color-scheme: light)">
+	<meta name="theme-color" content="rgb(17, 17, 17)" media="(prefers-color-scheme: dark)">
+	<meta content="546" property="og:image:width">
+	<meta content="400" property="og:image:height">
+	<meta name="twitter:image" content="https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/banner.png">
+	<meta property="og:image" content="https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/banner.png">
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
 	<link rel="stylesheet" href="style.min.css">
 </head>
 <body>
 	<div id="app"></div>
 	<script>
 	window.$docsify = {
-		name: 'ZodiacKit',
+		name: 'ContrastKit',
 		repo: 'https://github.com/markbattistella/ContrastKit',
 		homepage: 'https://raw.githubusercontent.com/markbattistella/ContrastKit/main/README.md',
 		auto2top: true,

diff --git a/README.md b/README.md
@@ -31,6 +31,7 @@ This package is particularly useful for UI/UX designers and developers focusing
 - [Provided Levels](#provided-levels)
   - [Colour Range](#colour-range)
   - [Contrast](#contrast)
+  - [Dark Mode](#dark-mode-optional)
 - [UITesting folder](#uitesting-folder)
   - [Debugging and Visualisation](#debugging-and-visualisation)
   - [Usage in Xcode](#usage-in-xcode)
@@ -171,33 +172,67 @@ ContrastKit provides two core enums to assist in designing UIs with appropriate
 
 The `ColorLevel` enum defines different levels of lightness for colours, which can be used to generate various shades from a single base colour. These shades range from very light (near white) to very dark (near black), suitable for different UI elements like backgrounds, text, and interactive elements.
 
-| Level    | Lightness | Description                                                         |
-| -------- | --------- | ------------------------------------------------------------------- |
-| level50  | 0.95      | Very light shade, almost white.                                     |
-| level100 | 0.90      | Very light shade.                                                   |
-| level200 | 0.80      | Lighter shade, for subtle backgrounds.                              |
-| level300 | 0.70      | Light shade, good for hover states or secondary buttons.            |
-| level400 | 0.60      | Medium light shade.                                                 |
-| level500 | 0.50      | Neutral base shade, often used for the primary variant of a colour. |
-| level600 | 0.40      | Medium dark shade.                                                  |
-| level700 | 0.30      | Darker shade, suitable for text.                                    |
-| level800 | 0.20      | Very dark shade, often used for text or active elements.            |
-| level900 | 0.10      | Very dark, closer to black.                                         |
-| level950 | 0.05      | Extremely dark, almost black.                                       |
-
-<img src="https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/light-mode.png" width="500" alt="Light Mode range of shades"/>
-
-<img src="https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/dark-mode.png" width="500" alt="Dark Mode range of shades"/>
+| Level      | Lightness | Description                                                         |
+|------------|-----------|---------------------------------------------------------------------|
+| `level50`  | `0.95`    | Very light shade, almost white.                                     |
+| `level100` | `0.90`    | Very light shade.                                                   |
+| `level200` | `0.80`    | Lighter shade, for subtle backgrounds.                              |
+| `level300` | `0.70`    | Light shade, good for hover states or secondary buttons.            |
+| `level400` | `0.60`    | Medium light shade.                                                 |
+| `level500` | `0.50`    | Neutral base shade, often used for the primary variant of a colour. |
+| `level600` | `0.40`    | Medium dark shade.                                                  |
+| `level700` | `0.30`    | Darker shade, suitable for text.                                    |
+| `level800` | `0.20`    | Very dark shade, often used for text or active elements.            |
+| `level900` | `0.10`    | Very dark, closer to black.                                         |
+| `level950` | `0.05`    | Extremely dark, almost black.                                       |
+
+| Light mode | Dark mode |
+|:-:|:-:|
+| ![Light Mode range of shades](https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/light-mode.png) | ![Dark Mode range of shades](https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/dark-mode.png) |
 
 ### Contrast
 
 The `ContrastLevel` enum specifies minimum and maximum contrast ratios for three accessibility standards: AA Large, AA, and AAA. These levels are based on the WCAG guidelines to ensure that text and interactive elements are readable and accessible.
 
-| Level    | Minimum Ratio | Maximum Ratio | Description                                     |
-| -------- | ------------- | ------------- | ----------------------------------------------- |
-| AA Large | 3.0           | 4.49          | Suitable for large text, offering basic readability. |
-| AA       | 4.5           | 6.99          | Standard level for normal text size, providing clear readability. |
-| AAA      | 7.0           | ∞             | Highest contrast level, recommended for the best readability across all contexts. |
+| Level    | Minimum Ratio | Maximum Ratio | Description |
+|----------|---------------|---------------|-------------|
+| AA Large | `3.0`         | `4.49`        | Suitable for large text, offering basic readability. |
+| AA       | `4.5`         | `6.99`        | Standard level for normal text size, providing clear readability. |
+| AAA      | `7.0`         | `.infinity`   | Highest contrast level, recommended for the best readability across all contexts. |
+
+### Dark mode (optional)
+
+ContrastKit also provides an optional dark mode (as pictured above) if you need the colours to adapt dynamically with your UI.
+
+You can do this by passing the `@Environment(\.colorScheme)` directly into the `level(_:scheme:)` function.
+
+```swift
+struct EnvironmentShadeView: View {
+  @Environment(\.colorScheme) private var colorScheme
+  var body: some View {
+    VStack {
+      Color.red.level(.level100, scheme: colorScheme)
+      Color.red.level(.level900, scheme: colorScheme)
+    }
+  }
+}
+```
+
+When the device switches colour schemes, the `ColorLevel` will flip:
+
+| Level      | Light mode | Dark mode equivalent |
+|------------|------------|----------------------|
+| `level50`  | `0.95`     | `0.05`               |
+| `level100` | `0.90`     | `0.10`               |
+| `level200` | `0.80`     | `0.20`               |
+| `level300` | `0.70`     | `0.30`               |
+| `level400` | `0.60`     | `0.40`               |
+| `level500` | `0.50`     | `0.50`               |
+| `level600` | `0.40`     | `0.60`               |
+| `level700` | `0.30`     | `0.70`               |
+| `level800` | `0.20`     | `0.80`               |
+| `level900` | `0.10`     | `0.90`               |
+| `level950` | `0.05`     | `0.95`               |
 
 ## UITesting folder
 
@@ -245,6 +280,16 @@ By modifying the `baseColor` or the `ColorLevel`, developers can experiment with
 
 The `PreviewTesting` file is a crucial tool for developers who are serious about integrating effective contrast handling in their applications, making ContrastKit a practical choice for enhancing UI accessibility.
 
+## Examples
+
+| iOS | iPadOS |
+|:-:|:-:|
+| ![iOS Shades example](https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/iOS.png) | ![iPad Shades example](https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/iPadOS.png) |
+
+| tvOS | visionOS |
+|:-:|:-:|
+| ![tvOS Shades example](https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/tvOS.png) | ![visionOS Shades example](https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/visionOS.png) |
+
 ## Contributing
 
 Contributions are highly encouraged, as they help make ContrastKit even more useful to the developer community. Feel free to fork the project, submit pull requests, or send suggestions via GitHub issues.

diff --git a/Sources/ContrastKit/UITesting/Example+SwiftUI.swift b/Sources/ContrastKit/UITesting/Example+SwiftUI.swift
@@ -63,6 +63,13 @@ internal struct EnvironmentShadeView: View {
                     ShadeCell(level, shade: shadeColor, contrast: contrastColor, info: contrastInfo)
                 }
             }
+            VStack {
+                baseColor.level(.level100, scheme: colorScheme)
+                baseColor.level(.level900, scheme: colorScheme)
+
+                baseColor.level(.level100, scheme: colorScheme).level900
+                baseColor.level(.level900, scheme: colorScheme).level100
+            }
         }
     }
 }