マイクロソフト社が既定する低明度基調の名称と色符号をCSS形式で入手

get-ms-dt_c.sh

#!/bin/sh

_METADATA='@prefix : <http://purl.org/net/ns/doas#>. <> a :Script;
:一行説明   """マイクロソフト社が既定する低明度基調の名称と色符号
               (https://docs.microsoft.com/ja-jp/microsoftteams/platform/concepts/design/components/color)
               をCSS形式で入手"""@ja;
:作成日     "2019-11-30";
:公開版     [:版 "0.1.1"; :作成日 "2019-11-30"];
:作成者     "cmplstofB";
:権利       "ⓒ 2019 cmplstofB";
:ライセンス <http://www.wtfpl.net/txt/copying/>;
:依存関係   "curl(1), xmllint(1)".'

main() {
	set -o errexit
	set -o nounset
	set -o noclobber
	umask 0022
	export PATH="$(command -p getconf PATH)${PATH:+:$PATH}"

	LSRC='/tmp/ms-dt_c.html'
	
	curl \
	  --header 'Accept-Language: en, *:q=0.5' \
	  --user-agent 'Mozilla/5.0' \
	  -o "$LSRC" \
	  'https://codepen.io/msteams/pen/BmBwjx.html'
	
	i=1; while [ $i -le $(xmllint --xpath 'count(//div[contains(@class, "color-item")]//h4)' \
	  --html "$LSRC") ]; do
		printf '%s_%s: %s;\n' \
		'--color' \
		"$(xmllint --xpath '//div[contains(@class, "color-item")]['$i']//h4/text()' \
		  --html $LSRC | sed -e 's/^$app-//;s/-darktheme$//;y/-/_/')" \
		"$(xmllint --xpath '//div[contains(@class, "color-item")]['$i']//h4/following-sibling::span/text()' \
		  --html $LSRC | sed -e 's/.*(\(#[[:xdigit:]]\{6\}\)).*/\1/1;')"
		i=$((i + 1))
	done
}

main "$@"

result-20191130.css

--color_white: #F3F2F1;
--color_gray_02: #BEBBB8;
--color_gray_03: #A19F9D;
--color_gray_04: #8A8886;
--color_gray_06: #484644;
--color_gray_08: #3B3A39;
--color_gray_12: #201F1E;
--color_black: #11100F;