From d1cc08db691851f8cfe428867792bba867018970 Mon Sep 17 00:00:00 2001 From: kaf-lamed-beyt Date: Sat, 21 Dec 2024 13:12:54 +0100 Subject: [PATCH 1/4] chore: add field-sizing to select and textarea --- src/extra/normalize.src.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/extra/normalize.src.css b/src/extra/normalize.src.css index f1278065..0dd7acf3 100644 --- a/src/extra/normalize.src.css +++ b/src/extra/normalize.src.css @@ -130,6 +130,7 @@ :where(select) { padding-inline: var(--size-relative-4) 0; padding-block: .75ch; + field-sizing: content; } :where(textarea, select, input:not([type="button"],[type="submit"],[type="reset"])) { @@ -137,7 +138,7 @@ border-radius: var(--radius-2); } -:where(textarea) { resize: block } +:where(textarea) { resize: block; field-sizing: content } :where(input[type="checkbox"], input[type="radio"]) { block-size: var(--size-3); From dddf2218a3f069151fd69b9e4237e30e84e007e7 Mon Sep 17 00:00:00 2001 From: kaf-lamed-beyt Date: Wed, 1 Jan 2025 13:47:51 +0100 Subject: [PATCH 2/4] document theme switches --- docsite/index.html | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/docsite/index.html b/docsite/index.html index 37051b63..a4ee21ef 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -1921,6 +1921,51 @@
Typography
+ +
+ Color Theming 201 + +
+
+

1) Theme switch

+

Color theming 101 shows how open-props implements various themes. With the switch imports, you can customize the appearance of a page by importing the props respectively

+

Similar to how light/dark mode behaviours are controlled with a toggle switch, commonly used with javascript for persistence of user's preference either to localStorage or a cookie on page reload.

+

See it in action: here

+
+ +
+
+ 
+                
+                  @import "https://unpkg.com/open-props/theme.light.switch.min.css";
+                  @import "https://unpkg.com/open-props/theme.dark.switch.min.css";
+                
+
+
+
+ +
+

2) Section theme

+

When you need to control the appearance of a specific section, you can use the same imports in a slightly different manner

+

Play with it here

+
+ +
+ 
+              
+                  @import "https://unpkg.com/open-props/theme.light.switch.min.css";
+                  @import "https://unpkg.com/open-props/theme.dark.switch.min.css";
+
+                  /* classes toggle the adaptive props */
+                  .dark, .light {
+                    color: var(--text-1);
+                    background: var(--surface-1);
+                  }
+              
+
+
+
+
From dfa204ec81887fdc4a6b90c1031401fca3dcf841 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Thu, 2 Jan 2025 17:58:10 +0000 Subject: [PATCH 3/4] looks great, a few edits --- docsite/index.html | 35 +++++++++++++++++------------------ 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/docsite/index.html b/docsite/index.html index a4ee21ef..94dc36a6 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -1713,7 +1713,7 @@
NPM Imported Usage Sample
- Color Theming 101 + Color 101: Themes
@@ -1923,31 +1923,30 @@
Typography
- Color Theming 201 + Color 201: Normalize Theme Switch
-

1) Theme switch

-

Color theming 101 shows how open-props implements various themes. With the switch imports, you can customize the appearance of a page by importing the props respectively

-

Similar to how light/dark mode behaviours are controlled with a toggle switch, commonly used with javascript for persistence of user's preference either to localStorage or a cookie on page reload.

+

1) Normalize Theme Switch

+ 
+              
+                @import "https://unpkg.com/open-props/theme.light.switch.min.css";
+                @import "https://unpkg.com/open-props/theme.dark.switch.min.css";
+              
+
+

The Open Props normalize.css has light and dark built in, but it only changes with the media query / operating system. If you want users to be able to change this, you'll need Open Props switch imports. These have the same theme values from normalize, but scoped to selectors.

+ +

Light Selectors: .light | .light-theme | data-theme="light"

+

Dark Selectors: .dark | .dark-theme | data-theme="dark"

+ +

This allows you to apply a light or dark theme to the page or a portion of the page using the selectors imported.

See it in action: here

-
-
- 
-                
-                  @import "https://unpkg.com/open-props/theme.light.switch.min.css";
-                  @import "https://unpkg.com/open-props/theme.dark.switch.min.css";
-                
-
-
-
-

2) Section theme

-

When you need to control the appearance of a specific section, you can use the same imports in a slightly different manner

-

Play with it here

+

When you need to control the appearance of a specific section, use any of the selectors from the switch imports, like .dark or .light, and apply them to HTML elements.

+

Try it here

From bcdcfb494eb93f4483f1a30b9c3b83416755715a Mon Sep 17 00:00:00 2001 From: kaf-lamed-beyt Date: Wed, 8 Jan 2025 13:05:32 +0100 Subject: [PATCH 4/4] update commit --- docsite/index.html | 2 +- package-lock.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docsite/index.html b/docsite/index.html index 94dc36a6..085c9f5c 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -1936,7 +1936,7 @@

1) Normalize Theme Switch

The Open Props normalize.css has light and dark built in, but it only changes with the media query / operating system. If you want users to be able to change this, you'll need Open Props switch imports. These have the same theme values from normalize, but scoped to selectors.

-

Light Selectors: .light | .light-theme | data-theme="light"

+

Light Selectors: .light | .light-theme | data-theme="light"

Dark Selectors: .dark | .dark-theme | data-theme="dark"

This allows you to apply a light or dark theme to the page or a portion of the page using the selectors imported.

diff --git a/package-lock.json b/package-lock.json index 8e376c0e..4e62853e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "open-props", - "version": "1.7.6", + "version": "1.7.10", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "open-props", - "version": "1.7.6", + "version": "1.7.10", "license": "MIT", "devDependencies": { "ava": "^3.15.0",