+++

stack--2022/3-advanced--browser/css--foundation/doc/storypad/index.html

@@ -14,15 +14,24 @@
 
 	startꓽstorypad(
 		{
-			own: stories,
-			shared: storiesⵧshared,
+			'sharedᐧdemos': storiesⵧshared,
+			'framework-specificᐧdemos': stories,
 		},
 		{
 			root_title: nearest_pkg?.name,
 			decorators: [
 				(story) => {
 					import('npm:@offirmo-private/css--foundation')
 					return story
+				},
+				(story) => {
+					import('npm:@offirmo-private/css--foundation/src/xoptional/color-theme--light.css')
+					document.documentElement.style.setProperty('--o⋄color⁚brand__h',
+						//'0', // red
+						//'120', // green
+						'240', // blue
+					)
+					return story
 				}
 			]
 		}

stack--2022/3-advanced--browser/css--foundation/src/consts.ts

@@ -0,0 +1 @@
+export const LIB = '@offirmo-private/css--foundation'

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

@@ -15,12 +15,9 @@
     or maybe just maybe, you need the color blue.
  * Also
   - should be able to tell an already clicked link https://mashable.com/article/google-black-links
- * Also: As SVG does not provide a default visual style for links,
- * it's considered best practice to add some
- * ref: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a#example
  */
 
-a, svg|a { /* TODO is svg|a needed? */
+a {
 	/* a color are being overwritten by the default style.
 	 * make it specific and inheritable
 	 */

stack--2022/3-advanced--browser/css--foundation/src/elements/element--body.css

@@ -1,22 +1,15 @@
 
 body {
-	/* XXX to review compatible web apps??
-	 * max width + centering = #1 most important styling according to https://jgthms.com/web-design-in-4-minutes/#centering
+	/* max width + centering = #1 most important styling according to https://jgthms.com/web-design-in-4-minutes/#centering
+	 * (Of course full-viewport webapps will need to cancel those default styles)
 	 */
 	max-width: var(--o⋄content-recommended-width);
 	margin: 0 max(1ch, (100vw - var(--o⋄content-recommended-width))/2); /* intelligent centering with a minimum margin for small screens */
+
 	/* no padding needed since space is provided by this various margins:
 	 * vertical: content blocks have their own margins, ex. headers, paragraphs...
 	 * horizontal: not needed thanks to to the intelligent centering above featuring a minimum margin
 	 * see also https://www.miriamsuzanne.com/2022/07/04/body-margin-8px/
 	 */
 	padding: 0;
 }
-
-/* TODO review
-html, body {
-	height: 100%;
-	min-height: 100%;
-	width: 100%;
-}
-*/

stack--2022/3-advanced--browser/css--foundation/src/elements/element--img.css

@@ -6,7 +6,7 @@ img {
 	/* defensive CSS, feel free to override https://ishadeed.com/article/defensive-css/ */
 	object-fit: cover;
 	max-width: 100%;
-	background-color: grey; /* in case the image doesn't load */
+	background-color: var(--o⋄color⁚bg--highlight--1); /* in case the image doesn't load */
 
 	/* src: ? */
 	image-rendering: -webkit-optimize-contrast;

stack--2022/3-advanced--browser/css--foundation/src/elements/element--meter.css

@@ -0,0 +1,11 @@
+/* This element has its own color (green)
+ * we tweak it to follow the theme.
+ */
+
+meter {
+	/* TODO
+	very seldom used, progress is more common
+	https://stackoverflow.com/questions/8094835/how-to-style-html5-meter-tag
+	https://css-tricks.com/html5-meter-element/
+	*/
+}

stack--2022/3-advanced--browser/css--foundation/src/elements/element--nav.css

@@ -1,6 +1,6 @@
+
 /* Assume list in a nav is an horizontal list
  */
-
 nav {
 
 	&:is(ol, ul) {

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

@@ -10,8 +10,40 @@
  * ref: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a#example
  *
  * @see elements--a.css
+ *
+ * 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 */
+
 	/* SVG specific additional styles */
 	&:link,
 	&:visited {
@@ -28,5 +60,4 @@ svg|a {
 	}
 }
 
-
 /* TODO display block? */

stack--2022/3-advanced--browser/css--foundation/src/elements/index.css

@@ -7,6 +7,7 @@
 @import 'element--hr.css';
 @import 'element--iframe.css';
 @import 'element--img.css';
+@import 'element--meter.css';
 @import 'element--nav.css';
 @import 'element--p.css';
 @import 'element--pre.css';

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

@@ -1,4 +1,6 @@
-
+/** colors from the default stylesheet.
+ * recommended as default.
+ */
 :root {
 	/* https://blog.mozilla.org/en/internet-culture/deep-dives/why-are-hyperlinks-blue/
 	 */

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

@@ -1,51 +1,32 @@
-/* TODO delete this file
- * TODO use relative colors https://caniuse.com/?search=relative%20color   https://developer.chrome.com/blog/css-relative-color-syntax/
- */
-
 /* This package is a "foundation",
  * it allows some limited customization
  * but advanced dynamic theming is better done either:
  * - as a full override
  * - in a dedicated package = offirmo/css-framework
  */
 :root {
-	/* A very easy way to add personality to your site is to start with a "brand" color
-	 * (ex. facebook and twitter have their special "blue" color)
-	 * and decline it into the other colors.
-	 * It's quite easy to do arithmetic with hsl https://hslpicker.com/
-	 */
-	--o⋄color⁚brand__h: 217; /* default browser blue */
-	--o⋄color⁚brand__s: 99%;
-	--o⋄color⁚brand__l: 65%;
-
 	/* foreground color = "primary content" = text, icons etc.
 	 * we want black or quasi black
 	*/
-	--o⋄color⁚fg--main__h: var(--o⋄color⁚brand__h);
-	--o⋄color⁚fg--main__s: 100%;
-	--o⋄color⁚fg--main__l: 0%; /* 0 = full black, ~5% = slightly not full black to allow a hint of a tint */
-	--o⋄color⁚fg--main: hsl(var(--o⋄color⁚fg--main__h), var(--o⋄color⁚fg--main__s), var(--o⋄color⁚fg--main__l));
+	--o⋄color⁚fg--main: hsl(0, 100%, 0%);
 
 	/* background color
 	 * we want white or quasi white
 	 */
-	--o⋄color⁚bg--main__h: var(--o⋄color⁚brand__h);
-	--o⋄color⁚bg--main__s: 100%;
-	--o⋄color⁚bg--main__l: 100%; /* 100 = full white, the best bg, ~90% =  slightly not white to allow a hint of a tint */
-	--o⋄color⁚bg--main: hsl(var(--o⋄color⁚bg--main__h), var(--o⋄color⁚bg--main__s), var(--o⋄color⁚bg--main__l));
+	--o⋄color⁚bg--main: hsl(0, 100%, 100%);
 
 	/* Slightly stronger 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: hsl(var(--o⋄color⁚fg--main__h), var(--o⋄color⁚fg--main__s), clamp(0%, calc(var(--o⋄color⁚fg--main__l) - 10%), 20%));
+	--o⋄color⁚fg--strong: var(--o⋄color⁚fg--main);
 
 	/* 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
 	 * 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: hsl(var(--o⋄color⁚brand__h), var(--o⋄color⁚brand__s), 65%);
+	--o⋄color⁚fg--accent: var(--o⋄color⁚fg--accent--default);
 
 	/* Links
 	 * @see ../elements/elements--a.css
@@ -61,18 +42,10 @@
 
 	/* Variation of background color for code.
 	 * This is a very common pattern.
-	 * We use S = 0~5% to make a gray (desaturate) then lower the luminosity
+	 * We want some gray
 	 */
-	--o⋄color⁚bg--code: hsl(var(--o⋄color⁚bg--main__h), 0%, clamp(90%, calc(var(--o⋄color⁚bg--main__l) - 7%), 100%));
+	--o⋄color⁚bg--code: hsl(0, 0%, 93%);
 
-	--o⋄color⁚bg--highlight--1: hsla(var(--o⋄color⁚fg--main__h), var(--o⋄color⁚fg--main__s), var(--o⋄color⁚fg--main__l), .1); /* bg color visible on normal bg, ex. for buttons */
-	--o⋄color⁚bg--highlight--2: hsla(var(--o⋄color⁚fg--main__h), var(--o⋄color⁚fg--main__s), var(--o⋄color⁚fg--main__l), .3); /* alt, ex. for hovered/clicked buttons */
+	--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⁚fg--ancillary , rgba(0, 0, 0, .33)
-
---o⋄color⁚bg--highlight--1
---o⋄color⁚bg--highlight--2
- */

stack--2022/3-advanced--browser/css--foundation/src/vars--tokens/tokens--colors.stories.ts

@@ -0,0 +1,103 @@
+import { All as Anchors } from '@offirmo-private/storypad/src/shared/stories/html/elements/a.stories'
+
+////////////////////////////////////////////////////////////////////////////////////
+
+// Table of colors defined as CSS variables
+function ColorsAsCSSVariablesTable({radixes, caption}: { radixes: string[], caption: string }) {
+	console.log({
+		radixes,
+		caption,
+	})
+
+	return `
+<table style="border: 1px solid var(--o⋄color⁚fg--main);">
+	<caption>⬇${ caption }⬇</caption>
+	<thead>
+		<tr>
+			<th scope='col'>CSS variable</th>
+			<th scope='col'>foreground</th>
+			<th scope='col'>background</th>
+			<th scope='col'>default (if any)</th>
+		</tr>
+	</thead>
+	<tbody>
+		${radixes.map(radix => {
+			const css_var = `--o⋄color⁚` + radix
+			return `
+				<tr key=${ radix } style="background-color: white;">
+					<td style="text-align: start; font-family: monospace;">${ css_var }</td>
+					${
+						radix.startsWith('bg--')
+							? `<td>-</td>`
+							: `<td style="color: var(${ css_var })">as foreground</td>`
+					}
+					${
+						radix.startsWith('fg--')
+							? `<td>-</td>`
+							: `<td style="background-color: var(${ css_var })">as background</td>`
+					}
+					${
+						radix.startsWith('bg--')
+							? `<td style="background-color: var(${ css_var }--default)">as background</td>`
+							: `<td style="color: var(${ css_var }--default)">as foreground</td>`
+					}
+				</tr>
+			`
+		}).join('\n') }
+	</tbody>
+</table>
+	`
+}
+
+export function ColorsꓽSemantic() {
+
+	const SEMANTIC_COLORS_VARS_RADIX = [
+		'fg--main',
+		'fg--strong',
+		'fg--link',
+		'fg--link--visited',
+
+		'fg--activity-outline',
+		//'fg--warning',
+		//'fg--info',
+		//'fg--success',
+
+		'bg--main',
+		'bg--code',
+		'bg--highlight--1',
+		'bg--highlight--2',
+
+		'fg--accent',
+	]
+
+	return ColorsAsCSSVariablesTable({
+				radixes: SEMANTIC_COLORS_VARS_RADIX,
+				caption: 'Semantic colors from CSS variables',
+			})
+}
+
+
+export function ColorsꓽColoredElements() {
+
+return `
+${ Anchors() }
+
+<br>
+
+<meter min=0 low=25 high=50 optimum=75 max=100 value=0></meter>
+<meter min=0 low=25 high=50 optimum=75 max=100 value=24></meter>
+<meter min=0 low=25 high=50 optimum=75 max=100 value=49></meter>
+<meter min=0 low=25 high=50 optimum=75 max=100 value=74></meter>
+<meter min=0 low=25 high=50 optimum=75 max=100 value=100></meter>
+
+<br>
+
+<progress max=100></progress><br>
+<progress max=100 value=0></progress><br>
+<progress max=100 value=50></progress><br>
+<progress max=100 value=100></progress>
+
+<br>
+
+`
+}