+++

stack--current/3-advanced--browser/css--foundation/README.md

@@ -41,8 +41,8 @@ see "tokens"
 --o⋄color⁚fg--strong          = <Hx> and <strong> (nice to have, usually defaulted to fg--main) 
 --o⋄color⁚fg--ancillary       = ex. hr  (ancillary bc. we may have a "secondary/dim" and this one is even dim'er)
 
---o⋄color⁚fg--accent                 = accent color, used by forms (default blue)
---o⋄color⁚fg--activity-outline       = outline color, used by focus indicator (default another blue)
+--o⋄color⁚accent                 = accent color, used by forms (default blue)
+--o⋄color⁚activity-outline       = outline color, used by focus indicator (default another blue)
 
 --o⋄color⁚bg--main
 --o⋄color⁚bg--code            = usually some grey close to bg

stack--current/3-advanced--browser/css--foundation/src/elements/element--a.css

@@ -17,7 +17,7 @@
   - should be able to tell an already clicked link https://mashable.com/article/google-black-links
  */
 
-a {
+a, svg|a { /* we also style the embedded SVG links at the same time, see ./element--svg.css */
 	/* a color are being overwritten by the default style.
 	 * make it specific and inheritable
 	 */
@@ -45,6 +45,6 @@ a {
 		background-color: var(--o⋄color⁚bg--highlight--1);
 	}
 	&:active {
-		color: var(--o⋄color⁚fg--activity-outline);
+		color: var(--o⋄color⁚activity-outline);
 	}
 }

stack--current/3-advanced--browser/css--foundation/src/elements/element--svg.css

@@ -2,6 +2,7 @@
  * Commented due to Parcel issue https://github.com/parcel-bundler/parcel/issues/9534
  * need to be manually inserted at the top of the final CSS or top of critical CSS
 @namespace svg url(http://www.w3.org/2000/svg);
+ * TODO auto-hoist those?
  */
 
 
@@ -14,35 +15,7 @@
  * WARNING This svg|a selector works ONLY if the svg namespace is defined!!
  */
 svg|a {
-	/************ COPY/PASTE from elements--a.css BEGINS */
-	/* copy/paste in case of accidentally breaking "a" if namespace is not defined */
-
-	/* a color are being overwritten by the default style.
-	 * make it specific and inheritable
-	 */
-	color: var(--o⋄color⁚fg--link);
-
-	/* we assume PWA, https://webkit.org/blog/5610/more-responsive-tapping-on-ios/ */
-	touch-action: manipulation;
-
-	&:link {
-	}
-
-	&:visited {
-		color: var(--o⋄color⁚fg--link--visited);
-	}
-
-	&:focus {
-	}
-
-	&:hover,
-	&:active {
-		/* There is no hover indicator on links.
-		 * Adding one is a no-brainer.
-		 */
-		color: var(--o⋄color⁚fg--activity-outline);
-	}
-	/************ COPY/PASTE from elements--a.css ENDS */
+	/******* See also element--a.css *******/
 
 	/* SVG specific additional styles */
 	&:link,
@@ -56,7 +29,7 @@ svg|a {
 	}
 	&:hover,
 	&:active {
-		outline: dotted var(--o⋄border--thickness) var(--o⋄color⁚fg--activity-outline); /* TODO px */
+		outline: dotted var(--o⋄border--thickness) var(--o⋄color⁚activity-outline); /* TODO test, TODO consider following normal a with fill */
 	}
 }
 

stack--current/3-advanced--browser/css--foundation/src/elements/elements--inputs.css

@@ -8,5 +8,5 @@
 	 * It's also an easy way to style inputs.
 	 * Note: because browsers will do auto-contrast, we need to use a light accent on light mode and vice versa
 	 */
-	accent-color: var(--o⋄color⁚fg--accent);
+	accent-color: var(--o⋄color⁚accent);
 }

stack--current/3-advanced--browser/css--foundation/src/vars--const/consts--colors--defaults.css

@@ -7,6 +7,6 @@
 	--o⋄color⁚fg--link--default: hsl(240, 100%, 50%);
 	--o⋄color⁚fg--link--visited--default: hsl(271, 68%, 32%);
 
-	--o⋄color⁚fg--activity-outline--default: hsl(217, 99%, 65%);
-	--o⋄color⁚fg--accent--default: hsl(212, 100%, 50%);
+	--o⋄color⁚activity-outline--default: hsl(217, 99%, 65%);
+	--o⋄color⁚accent--default: hsl(212, 100%, 50%);
 }

stack--current/3-advanced--browser/css--foundation/src/vars--tokens/tokens--colors.css

@@ -26,32 +26,36 @@
 	 * It's also an easy way to style inputs.
 	 * Note: because browsers will do auto-contrast, we need to use a light accent on light mode and vice versa
 	 */
-	--o⋄color⁚fg--accent: var(--o⋄color⁚fg--accent--default);
+	--o⋄color⁚accent: var(--o⋄color⁚accent--default);
 
 	/* Links
 	 * @see ../elements/elements--a.css
 	 */
 	--o⋄color⁚fg--link:          var(--o⋄color⁚fg--link--default);
 	--o⋄color⁚fg--link--visited: var(--o⋄color⁚fg--link--visited--default);
 
-	/* Outline color for interactive elements being interacted with,
+	/* Outline color for outlining interactive elements being interacted with,
 	 * ex. buttons being pressed, links being pressed/hovered.
 	 * Also used as focus ring color (if enabled).
-	 * Ideally should be a color that contrasts well enough with the FOREground ex. for temporary controls bgcolor.
+	 * Ideally should be a color that contrasts well enough with the FOREground (ex. used as temp bgcolor on controls)
+	 * but should also be acceptable as a fg = clicked links
 	 */
-	--o⋄color⁚fg--activity-outline: var(--o⋄color⁚fg--activity-outline--default);
+	--o⋄color⁚activity-outline: var(--o⋄color⁚activity-outline--default);
 
 	/* Variation of background color for code.
 	 * This is a very common pattern.
 	 * We want some gray
 	 */
 	--o⋄color⁚bg--code: hsl(0, 0%, 93%);
 
-	/* An alternative background color
+	/* Alternative background colors when we want to highlight something on the normal bg
 	 * Should be very close to the normal one.
 	 * Used when we want a slight change of background, ex.
 	 * - striped table rows
+	 * - button colors
+	 * We need a second one to further highlight, ex. hovered button should be even further highlighted
+	 * (click will have "activity-outline")
 	 */
-	--o⋄color⁚bg--highlight--1: hsla(0, 100%, 0%, .1); /* bg color visible on normal bg, ex. for buttons */
-	--o⋄color⁚bg--highlight--2: hsla(0, 100%, 0%, .3); /* alt, ex. for hovered/clicked buttons */
+	--o⋄color⁚bg--highlight--1: hsla(0, 100%, 0%, .1);
+	--o⋄color⁚bg--highlight--2: hsla(0, 100%, 0%, .3);
 }

stack--current/3-advanced--browser/css--framework/NOTES.md

@@ -26,3 +26,5 @@ TODO https://ishadeed.com/article/css-cap-unit/
 TODO https://ishadeed.com/article/the-gap/
 
 maybe? https://ryanve.dev/sharp.css/
+
+TODO similar https://dev.to/lowlighter/make-naked-websites-look-great-with-matchacss-4ng7

stack--current/3-advanced--browser/css--framework/README.md

@@ -115,8 +115,8 @@ COLORS inherited from foundation
 --o⋄color⁚fg--main
 --o⋄color⁚fg--strong
 --o⋄color⁚fg--ancillary
---o⋄color⁚fg--accent
---o⋄color⁚fg--activity-outline
+--o⋄color⁚accent
+--o⋄color⁚activity-outline
 --o⋄color⁚bg--main
 --o⋄color⁚bg--code
 --o⋄color⁚bg--highlight--1

stack--current/3-advanced--browser/css--framework/doc/demo/storypad.html

@@ -1,5 +1,6 @@
 
 <script type="module">
+	import * as storiesⵧshared from '@offirmo-private/storypad/src/__shared/stories/html/*.stories.@(js|jsx|ts|tsx|mdx)'
 	import * as stories_reset from '../../../css--reset/stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'
 	import * as stories_foundation from '../../../css--foundation/stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'
 	import * as stories_framework from '../../../css--framework/stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'
@@ -10,6 +11,7 @@
 	import start_storypad from '@offirmo-private/storypad'
 
 	const stories = {
+		html: storiesⵧshared,
 		reset: stories_reset,
 		foundation: stories_foundation,
 		framework: stories_framework,

stack--current/3-advanced--browser/css--framework/src/advanced/controls.css

@@ -13,7 +13,7 @@
  TODO dynamic width
  */
 body.user-is-tabbing *:focus {
-	outline: 5px auto var(--o⋄color⁚fg--activity-outline);
+	outline: 5px auto var(--o⋄color⁚activity-outline);
 }
 
 
@@ -48,7 +48,7 @@ button:hover {
 	background-color: var(--o⋄color⁚bg--highlight--2);
 }
 button:active {
-	background-color: var(--o⋄color⁚fg--activity-outline);
+	background-color: var(--o⋄color⁚activity-outline);
 	/* reminder: button may not have a border, cf. "inline button" */
 }
 

stack--current/3-advanced--browser/css--framework/src/advanced/error-reports.css

@@ -1,12 +1,15 @@
 .o⋄error-report {
+	/* REMINDER this class has a special treatment in the theming definition
+	 * to ensure it's well contrasted.
+	 */
 	font-size: xx-small;
 	font-family: monospace;
-	color: var(--o⋄color⁚fg--error);
+	color: var(--o⋄color⁚fg--error); /* reminder: we force inherit from dark theme = compatible */
 	background-color: var(--o⋄color⁚darker--66);
 	border: 2px dashed var(--o⋄color⁚fg--error);
 	padding: .3em;
 	margin: auto;
-	z-index: 100000; /* just in case TODO check */
+	z-index: 100000; /* just in case TODO check useful / works */
 }
 .o⋄error-report > pre, .o⋄error-report > samp {
 	white-space: pre-wrap;

stack--current/3-advanced--browser/css--framework/src/atomic/atomic--misc.css

@@ -89,4 +89,7 @@ button.o⋄button--inline {
 	--o⋄border--thickness__button: 0; /* override own CSS var for this typeof button */
 	padding: .1em .3em; /* TODO semantic */
 	border-radius: .35em;
+	/* TODO outline when pressed */
+}
+
 }

stack--current/3-advanced--browser/css--framework/src/themes/index.css

@@ -2,7 +2,7 @@
 @import '../consts/consts--colors--boz.css';
 @import '../consts/consts--colors--modifiers.css';
 
-/* NOTE error-report
+/* NOTE about o⋄error-report
  * This is special:
  * - we want high readability so, so we force a default mode
  * - we select *dark* mode to hint at dev (but could have selected light as well, no big deal)
@@ -13,12 +13,10 @@
 	 * We need to re-set the var usages initially set in :root {} (including from @offirmo/foundation tokens-colors.css)
 	 * To allow local overrides of the styles down in the DOM
 	 */
-	color: var(--o⋄color⁚fg--main);
-	background-color: var(--o⋄color⁚bg--main);
-	--o⋄color⁚fg--strong: var(--o⋄color⁚fg--main);
-	accent-color: var(--o⋄color⁚fg--accent);
-
-	scrollbar-color: var(--o⋄color⁚bg--highlight--1) var(--o⋄color⁚bg--main); /* <scrollbar color> <scrollbar track color> */
+	color:                var(--o⋄color⁚fg--main);
+	background-color:     var(--o⋄color⁚bg--main);
+	accent-color:         var(--o⋄color⁚accent);
+	scrollbar-color:      var(--o⋄color⁚bg--highlight--1) var(--o⋄color⁚bg--main); /* <scrollbar color> <scrollbar track color> */
 }
 
 
@@ -32,13 +30,18 @@
 	 * as suggested by https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
 	 * Note that we use transparency to adapt to any background (cf. same link)
 	 */
-	--o⋄color⁚fg--secondary: var(--o⋄color⁚darker--66);
+	--o⋄color⁚fg--secondary: oklch(from var(--o⋄color⁚fg--main) l c h / 66%);
 	/* a color for ancillary content,
 	 * ex. ex. copyright notice in a footer
 	 * as suggested by https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
 	 * Note that we use transparency to adapt to any background (cf. same link)
 	 */
-	--o⋄color⁚fg--ancillary: var(--o⋄color⁚darker--33);
+	--o⋄color⁚fg--ancillary: oklch(from var(--o⋄color⁚fg--main) l c h / 33%);
+	/* OPTIONAL A dedicated color for headers and <strong>.
+	 * As suggested by https://jgthms.com/web-design-in-4-minutes/#color-contrast "Color & contrast"
+	 * "nice to have", can be equal to the main color without any problem.
+	 */
+	--o⋄color⁚fg--strong: var(--o⋄color⁚fg--main);
 
 	--o⋄color⁚bg--main: white;
 	--o⋄color⁚bg--code: hsl(0, 0%, 90%);
@@ -48,19 +51,23 @@
 
 	/* An "accent color" is an easy way to add "that dash of visual flair to your UI"
 	 * cf. https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886 §6
+	 * full details https://css-tricks.com/almanac/properties/a/accent-color/
 	 * It's also an easy way to style inputs.
-	 * Note: because browsers will do auto-contrast, we need to use a light accent on light mode and vice versa
+	 * Note: this is neither a fg nor bg color.
+	 * Note: browsers will do auto-contrast https://css-tricks.com/almanac/properties/a/accent-color/
 	 */
-	--o⋄color⁚fg--accent:           var(--o⋄color⁚fg--accent--default);
+	--o⋄color⁚accent:           var(--o⋄color⁚accent--default);
 	/* Outline color for elements being interacted with,
 	 * ex. buttons being pressed, links being pressed/hovered.
 	 * Also used as focus ring color (if enabled).
+	 * Note: this is neither a fg nor bg color, let's aim for mid-way between dark and light
+	 it is supposed to be temporary so it's ok if the contrast is not great
 	 */
-	--o⋄color⁚fg--activity-outline: var(--o⋄color⁚fg--activity-outline--default);
+	--o⋄color⁚activity-outline: var(--o⋄color⁚activity-outline--default);
 
-	/* leave links to their default colors
+	/* Ideally leave links to their default colors
 	 * UNLESS if customizing the fg color,
-	 * it usually renders better to set fg--link = fg--main
+	 * If custom, it usually renders better to set fg--link = fg--main
 	 */
 	--o⋄color⁚fg--link:          var(--o⋄color⁚fg--link--default);
 	--o⋄color⁚fg--link--visited: var(--o⋄color⁚fg--link--visited--default);
@@ -82,17 +89,18 @@
  */
 [data-o-theme^=dark], .o⋄error-report { /*  data-o-theme="dark*" */
 	--o⋄color⁚fg--main: white;
-	--o⋄color⁚fg--secondary: var(--o⋄color⁚lighter--66);
-	--o⋄color⁚fg--ancillary: var(--o⋄color⁚lighter--33);
+	--o⋄color⁚fg--secondary: oklch(from var(--o⋄color⁚fg--main) l c h / 66%);
+	--o⋄color⁚fg--ancillary: oklch(from var(--o⋄color⁚fg--main) l c h / 33%);
+	--o⋄color⁚fg--strong: var(--o⋄color⁚fg--main);
 
 	--o⋄color⁚bg--main: black;
 	--o⋄color⁚bg--code: hsl(0, 0%, 25%);
 	--o⋄color⁚bg--main--backdrop: var(--o⋄color⁚darker--66);
 	--o⋄color⁚bg--highlight--1: var(--o⋄color⁚lighter--20);
 	--o⋄color⁚bg--highlight--2: var(--o⋄color⁚lighter--33);
 
-	--o⋄color⁚fg--accent:           var(--o⋄color⁚fg--accent--default);
-	--o⋄color⁚fg--activity-outline: var(--o⋄color⁚fg--activity-outline--default);
+	--o⋄color⁚accent:           var(--o⋄color⁚accent--default);
+	--o⋄color⁚activity-outline: var(--o⋄color⁚activity-outline--default);
 
 	--o⋄color⁚fg--link:          hsl(215, 100%, 67%);
 	--o⋄color⁚fg--link--visited: hsl(287, 100%, 67%); /* split complementary of link */

stack--current/3-advanced--browser/css--framework/src/themes/theme--dark--colorhunt212.css

@@ -7,17 +7,17 @@
 
 	--o⋄color⁚fg--main: var(--o⋄color⁚co212__beige);
 
-	--o⋄color⁚fg--secondary: hsla(42, 100%, 87%, 0.66);
+	--o⋄color⁚fg--secondary: hsla(42, 100%, 87%, 0.66); /* TODO color functions */
 	--o⋄color⁚fg--ancillary: hsla(42, 100%, 87%, 0.33);
 
-	--o⋄color⁚fg--accent: var(--o⋄color⁚co212__beige);
-	--o⋄color⁚fg--activity-outline: var(--o⋄color⁚co212__blue);
+	--o⋄color⁚accent: var(--o⋄color⁚co212__beige);
+	--o⋄color⁚activity-outline: var(--o⋄color⁚co212__blue);
 	--o⋄color⁚bg--main: var(--o⋄color⁚co212__brown);
 	--o⋄color⁚bg--code: #75636a;
 
 	/* "app" mode, we don't emphasize links */
 	--o⋄color⁚fg--link:          var(--o⋄color⁚co212__beige);
-	--o⋄color⁚fg--link--visited: var(--o⋄color⁚co212__beige);
+	--o⋄color⁚fg--link--visited: var(--o⋄color⁚co212__beige); /* TODO alt */
 
 	/* no need to redefine
 	--o⋄color⁚fg--error: red;