Merge branch 'main' into learn-sass

* main: (21 commits)
  lint
  lint
  remove unused
  adjust alert link color
  consistent globabl variables
  fix links, buttons
  remove unused color theme file
  remove unused file
  review edits
  lint
  fix default button color
  clean up button background states
  split color modules used for converting tokens
  expand color config, relocate color functions
  clean up syntax highlighting and wip color config
  fix build error
  cleanup + wip color config
  remove unused stylesheet, cleanup
  wip adjust prism theme for syntax highlightling
  Add another example theme
  ...
This commit is contained in:
Jonny Gerig Meyer 2023-02-24 16:17:30 -07:00
commit c6f9dad34a
No known key found for this signature in database
GPG Key ID: FB602F738A872F7F
17 changed files with 608 additions and 677 deletions

View File

@ -1,6 +1,7 @@
'use strict';
const { EleventyRenderPlugin } = require('@11ty/eleventy');
const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
const formatDistanceToNow = require('date-fns/formatDistanceToNow');
const yaml = require('js-yaml');
const markdown = require('markdown-it');
@ -101,6 +102,7 @@ module.exports = (eleventyConfig) => {
);
eleventyConfig.addPlugin(EleventyRenderPlugin);
eleventyConfig.addPlugin(syntaxHighlight);
// settings
return {

View File

@ -40,6 +40,7 @@
},
"devDependencies": {
"@11ty/eleventy": "^2.0.0",
"@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
"@babel/core": "^7.20.12",
"@babel/preset-env": "^7.20.2",
"@babel/preset-typescript": "^7.18.6",

View File

@ -1,14 +1,11 @@
@use 'sass:color';
@use '../functions';
@use '../visual-design/theme';
@use '../config/color/brand';
@use '../visual-design/typography';
.sl-c-alert {
background: var(
--alert-bg,
color.adjust(theme.$sl-color--hopbush, $lightness: -10%)
);
color: theme.$sl-color--white;
background: var(--alert-bg, var(--sl-color--highlight));
color: var(--sl-color--white);
font-size: var(--sl-font-size--small);
padding: {
@ -37,24 +34,27 @@
}
a {
border-bottom-color: rgba(theme.$sl-color--white, 0.5);
color: theme.$sl-color--white;
border-bottom-color: rgba(
brand.$sl-color--white,
var(--opacity-border, 0.5)
);
color: var(--sl-color--white);
font-weight: typography.$sl-font-weight--bold;
&:hover,
&:focus {
background: rgba(black, 0.0625);
border-bottom-color: rgba(theme.$sl-color--white, 0.75);
--color-link-bg: rgba(0, 0, 0, 6.25%);
--opacity-border: 0.75;
}
&:active {
border-bottom-color: theme.$sl-color--white;
--opacity-border: 1;
}
}
}
.sl-c-alert--info {
--alert-bg: theme.$sl-color--midnight-blue;
--alert-bg: var(--sl-color--midnight-blue);
}
.sl-c-alert--special {

View File

@ -1,49 +1,46 @@
@use 'sass:color';
@use '../functions';
@use '../visual-design/theme';
.sl-c-button {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
border: 0;
border-radius: var(--sl-border-radius--large);
padding: var(--sl-gutter--minus) var(--sl-gutter);
background: theme.$sl-color--iron;
box-shadow: 0 2px 1px rgba(theme.$sl-color--midnight-blue, 0.125);
color: color.adjust(theme.$sl-color--hopbush, $lightness: -10%);
background: var(--color-button-bg, var(--sl-color--iron));
box-shadow: 0 2px 1px var(--sl-color--shadow);
color: var(--color-button-text, var(--sl-color--highlight));
cursor: pointer;
display: inline-flex;
justify-content: center;
margin: 0;
padding: var(--sl-gutter--minus) var(--sl-gutter);
&:hover,
&:focus {
color: color.adjust(theme.$sl-color--bouquet, $lightness: -10%);
--color-button-text: var(--sl-color--action);
--color-button-bg: var(--sl-color-link--action);
}
&:active {
color: color.adjust(theme.$sl-color--venus, $lightness: -10%);
--color-button-text: var(--sl-color--active);
}
&--primary {
background-color: color.adjust(theme.$sl-color--hopbush, $lightness: -10%);
--color-button-bg: var(--sl-color--highlight);
&,
&:hover,
&:focus,
&:active {
color: theme.$sl-color--white;
--color-button-text: var(--sl-color--white);
}
&:hover,
&:focus {
background-color: color.adjust(
theme.$sl-color--bouquet,
$lightness: -10%
);
--color-button-bg: var(--sl-color--action);
}
&:active {
background-color: color.adjust(theme.$sl-color--venus, $lightness: -10%);
--color-button-bg: var(--sl-color--active);
}
}
}

View File

@ -72,8 +72,6 @@ h6 {
}
to {
background-color: #f8f8f8;
// background-color: <%= Rouge::Themes::Github.get_style(Rouge::Token::Tokens::Text)[:bg] %>;
background-color: var(--sl-color-code--bg);
}
}

View File

@ -1,2 +1,3 @@
@forward 'scale';
@forward 'utility';
@forward 'color';

View File

@ -1,12 +1,16 @@
@use 'sass:map';
@use 'sass:meta';
@use 'scale';
@use 'color/brand';
@use 'color/content';
/// Returns all the variables defined in a module,
/// as a map from variable names (without $)
/// to the values of those variables.
/// @link https://sass-lang.com/documentation/modules/meta#module-variables
$scale: meta.module-variables('scale');
$brand-colors: meta.module-variables('brand');
$content-colors: meta.module-variables('content');
// Loops through and returns all tokens from above files as CSS variables.
@mixin tokens($map, $prefix: null) {

View File

@ -0,0 +1,12 @@
$sl-color--hopbush: #c69;
$sl-color--bouquet: #b37399;
$sl-color--venus: #998099;
$sl-color--patina: #699;
$sl-color--nebula: #d2e1dd;
$sl-color--white: white;
$sl-color--dawn-pink: #f2ece4;
$sl-color--wafer: #e1d7d2;
$sl-color--iron: #dadbdf;
$sl-color--regent-grey: #808c99;
$sl-color--pale-sky: #6b717f;
$sl-color--midnight-blue: #036;

View File

@ -0,0 +1,288 @@
@use 'sass:math';
@use 'sass:color';
@use 'sass:list';
@use 'brand';
@function luminance($color) {
$red: list.nth($linear-channel-values, color.red($color) + 1);
$green: list.nth($linear-channel-values, color.green($color) + 1);
$blue: list.nth($linear-channel-values, color.blue($color) + 1);
@return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
}
@function contrast($back, $front) {
$backLum: luminance($back) + 0.05;
$foreLum: luminance($front) + 0.05;
@return math.div(max($backLum, $foreLum), min($backLum, $foreLum));
}
@function choose-contrast-color($color) {
$lightContrast: contrast($color, brand.$sl-color--white);
$darkContrast: contrast($color, brand.$sl-color--black);
@if $lightContrast > $darkContrast {
@return brand.$sl-color--white;
} @else {
@return brand.$sl-color--black;
}
}
/* prettier-ignore */
$linear-channel-values: 0
.0003035269835488375
.000607053967097675
.0009105809506465125
.00121410793419535
.0015176349177441874
.001821161901293025
.0021246888848418626
.0024282158683907
.0027317428519395373
.003035269835488375
.003346535763899161
.003676507324047436
.004024717018496307
.004391442037410293
.004776953480693729
.005181516702338386
.005605391624202723
.006048833022857054
.006512090792594475
.006995410187265387
.007499032043226175
.008023192985384994
.008568125618069307
.009134058702220787
.00972121732023785
.010329823029626936
.010960094006488246
.011612245179743885
.012286488356915872
.012983032342173012
.013702083047289686
.014443843596092545
.01520851442291271
.01599629336550963
.016807375752887384
.017641954488384078
.018500220128379697
.019382360956935723
.0202885630566524
.021219010376003555
.022173884793387385
.02315336617811041
.024157632448504756
.02518685962736163
.026241221894849898
.027320891639074894
.028426039504420793
.0295568344378088
.030713443732993635
.03189603307301153
.033104766570885055
.03433980680868217
.03560131487502034
.03688945040110004
.0382043715953465
.03954623527673284
.04091519690685319
.042311410620809675
.043735029256973465
.04518620438567554
.046665086336880095
.04817182422688942
.04970656598412723
.05126945837404324
.052860647023180246
.05448027644244237
.05612849004960009
.05780543019106723
.0595112381629812
.06124605423161761
.06301001765316767
.06480326669290577
.06662593864377289
.06847816984440017
.07036009569659588
.07227185068231748
.07421356838014963
.07618538148130785
.07818742180518633
.08021982031446832
.0822827071298148
.08437621154414882
.08650046203654976
.08865558628577294
.09084171118340768
.09305896284668745
.0953074666309647
.09758734714186246
.09989872824711389
.10224173308810132
.10461648409110419
.10702310297826761
.10946171077829933
.1119324278369056
.11443537382697373
.11697066775851084
.11953842798834562
.12213877222960187
.12477181756095049
.12743768043564743
.1301364766903643
.13286832155381798
.13563332965520566
.13843161503245183
.14126329114027164
.14412847085805777
.14702726649759498
.14995978981060856
.15292615199615017
.1559264637078274
.1589608350608804
.162029375639111
.1651321945016676
.16826940018969075
.1714411007328226
.17464740365558504
.17788841598362912
.18116424424986022
.184474994500441
.18782077230067787
.19120168274079138
.1946178304415758
.19806931955994886
.20155625379439707
.20507873639031693
.20863687014525575
.21223075741405523
.21586050011389926
.2195261997292692
.2232279573168085
.22696587351009836
.23074004852434915
.23455058216100522
.238397573812271
.24228112246555486
.24620132670783548
.25015828472995344
.25415209433082675
.2581828529215958
.26225065752969623
.26635560480286247
.2704977910130658
.27467731206038465
.2788942634768104
.2831487404299921
.2874408377269175
.29177064981753587
.2961382707983211
.3005437944157765
.3049873140698863
.30946892281750854
.31398871337571754
.31854677812509186
.32314320911295075
.3277780980565422
.33245153634617935
.33716361504833037
.3419144249086609
.3467040563550296
.35153259950043936
.3564001441459435
.3613067797835095
.3662525955988395
.3712376804741491
.3762621229909065
.38132601143253014
.386429433787049
.39157247774972326
.39675523072562685
.4019777798321958
.4072402119017367
.41254261348390375
.4178850708481375
.4232676699860717
.4286904966139066
.43415363617474895
.4396571738409188
.44520119451622786
.45078578283822346
.45641102318040466
.4620769996544071
.467783796112159
.47353149614800955
.4793201831008268
.4851499400560704
.4910208498478356
.4969329950608704
.5028864580325687
.5088813208549338
.5149176653765214
.5209955732043543
.5271151257058131
.5332764040105052
.5394794890121072
.5457244613701866
.5520114015120001
.5583403896342679
.5647115057049292
.5711248294648731
.5775804404296506
.5840784178911641
.5906188409193369
.5972017883637634
.6038273388553378
.6104955708078648
.6172065624196511
.6239603916750761
.6307571363461468
.6375968739940326
.6444796819705821
.6514056374198242
.6583748172794485
.665387298282272
.6724431569576875
.6795424696330938
.6866853124353135
.6938717612919899
.7011018919329731
.7083757798916868
.7156935005064807
.7230551289219693
.7304607400903537
.7379104087727308
.7454042095403874
.7529422167760779
.7605245046752924
.768151147247507
.7758222183174236
.7835377915261935
.7912979403326302
.799102738014409
.8069522576692516
.8148465722161012
.8227857543962835
.8307698767746546
.83879901174074
.846873231509858
.8549926081242338
.8631572134541023
.8713671191987972
.8796223968878317
.8879231178819663
.8962693533742664
.9046611743911496
.9130986517934192
.9215818562772946
.9301108583754237
.938685728457888
.9473065367331999
.9559733532492861
.9646862478944651
.9734452903984125
.9822505503331171
.9911020971138298
1;

View File

@ -0,0 +1,10 @@
@use 'sass:color';
@use 'brand';
$color--highlight: color.adjust(brand.$sl-color--hopbush, $lightness: -10%);
$color--action: color.adjust(brand.$sl-color--bouquet, $lightness: -10%);
$color--shadow: rgba(brand.$sl-color--midnight-blue, 0.125);
$color--active: color.adjust(brand.$sl-color--venus, $lightness: -10%);
$color-code--bg: #f8f8f8;
$color-code--text: color.adjust(brand.$sl-color--pale-sky, $lightness: -25%);
$color-link--action: rgba(218, 219, 223, 25%);

View File

@ -0,0 +1,3 @@
@forward 'brand';
@forward 'config';
@forward 'content';

View File

@ -1,273 +1,116 @@
@use '../functions';
// Stylesheet pulled from Rogue stylesheet with colours updated for a11y
/**
* Based on the GHColors theme by Avi Aryan (http://aviaryan.in)
* Inspired by GitHub syntax coloring
*/
.highlight table td { padding: functions.sl-px-to-rem(5px); }
.highlight table pre { margin: 0; }
.highlight .cm {
color: #656556;
code[class*="language-"],
pre[class*="language-"] {
background-color: var(--sl-color-code--bg);
hyphens: none;
word-break: normal;
word-spacing: normal;
tab-size: 4;
text-align: left;
}
.token {
color: var(--sl-color-code--text);
}
.token table td {
padding: functions.sl-px-to-rem(5px);
}
.token table pre {
margin: 0;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
--sl-color-code--text: #656556;
font-style: italic;
}
.highlight .cp {
color: #999999;
[class*="language-css"] {
& .token.comment {
--sl-color-code--text: #006666;
}
}
.token.namespace {
opacity: 0.7;
}
.token.string,
.token.attr-value {
--sl-color-code--text: #df1144;
}
.token.punctuation,
.token.operator {
--sl-color-code--text: #393A34;
/* no highlight */
font-weight: bold;
}
.highlight .c1 {
color: #656556;
.token.entity,
.token.url,
.token.symbol,
.token.number,
.token.boolean,
.token.constant,
.token.property,
.token.regex,
.token.inserted {
--sl-color-code--text: #990000;
font-weight: bold;
}
.token.atrule,
.token.keyword,
.token.attr-name,
.language-autohotkey .token.selector {
--sl-color-code--text: #000000;
font-weight: bold;
}
.token.function,
.token.deleted,
.language-autohotkey .token.tag {
--sl-color-code--text: #9a050f;
}
.token.tag,
.token.selector,
.language-autohotkey .token.keyword {
--sl-color-code--text: #445588;
font-weight: bold;
}
.token.important,
.token.function,
.token.bold {
font-weight: bold;
}
[class*="language-shell"] {
& .token.function {
--sl-color-code--text: unset;
font-weight: normal;
}
}
.token.italic {
font-style: italic;
}
.highlight .cs {
color: #999999;
font-weight: bold;
font-style: italic;
.token.variable,
.token[class*="placeholder"] {
--sl-color-code--text: #006666;
font-weight: normal;
}
.highlight .c, .highlight .cd {
color: #006666;
font-style: italic;
}
.highlight .err {
color: #a61717;
background-color: #e3d2d2;
}
.highlight .gd {
color: #000000;
background-color: #ffdddd;
}
.highlight .ge {
color: #000000;
font-style: italic;
}
.highlight .gr {
color: #aa0000;
}
.highlight .gh {
color: #999999;
}
.highlight .gi {
color: #000000;
background-color: #ddffdd;
}
.highlight .go {
color: #888888;
}
.highlight .gp {
color: #555555;
}
.highlight .gs {
font-weight: bold;
}
.highlight .gu {
color: #aaaaaa;
}
.highlight .gt {
color: #aa0000;
}
.highlight .kc {
color: #000000;
font-weight: bold;
}
.highlight .kd {
color: #000000;
font-weight: bold;
}
.highlight .kn {
color: #000000;
font-weight: bold;
}
.highlight .kp {
color: #000000;
font-weight: bold;
}
.highlight .kr {
color: #000000;
font-weight: bold;
}
.highlight .kt {
color: #445588;
font-weight: bold;
}
.highlight .k, .highlight .kv {
color: #000000;
font-weight: bold;
}
.highlight .mf {
color: #006666;
}
.highlight .mh {
color: #006666;
}
.highlight .il {
color: #006666;
}
.highlight .mi {
color: #006666;
}
.highlight .mo {
color: #006666;
}
.highlight .m, .highlight .mb, .highlight .mx {
color: #006666;
}
.highlight .sb {
color: #d14;
}
.highlight .sc {
color: #d14;
}
.highlight .sd {
color: #d14;
}
.highlight .s2 {
color: #d14;
}
.highlight .se {
color: #d14;
}
.highlight .sh {
color: #d14;
}
.highlight .si {
color: #d14;
}
.highlight .sx {
color: #d14;
}
.highlight .sr {
color: #006619;
}
.highlight .s1 {
color: #d14;
}
.highlight .ss {
color: #990073;
}
.highlight .s {
color: #d14;
}
.highlight .na {
color: #006666;
}
.highlight .bp {
color: #666666;
}
.highlight .nb {
color: #006080;
}
.highlight .nc {
color: #445588;
font-weight: bold;
}
.highlight .no {
color: #004D4D;
}
.highlight .nd {
color: #3c5d5d;
font-weight: bold;
}
.highlight .ni {
color: #800080;
}
.highlight .ne {
color: #990000;
font-weight: bold;
}
.highlight .nf {
color: #990000;
font-weight: bold;
}
.highlight .nl {
color: #990000;
font-weight: bold;
}
.highlight .nn {
color: #555555;
}
.highlight .nt {
color: #000080;
}
.highlight .vc {
color: #004D4D;
}
.highlight .vg {
color: #004D4D;
}
.highlight .vi {
color: #004D4D;
}
.highlight .nv {
color: #006666;
}
.highlight .ow {
color: #000000;
font-weight: bold;
}
.highlight .o {
color: #000000;
font-weight: bold;
}
.highlight .w {
color: #bbbbbb;
}
.highlight {
background-color: #f8f8f8;
}

View File

@ -1 +0,0 @@
<%= Rouge::Themes::Github.render(:scope => '.highlight') %>

View File

@ -1,85 +0,0 @@
:root {
--light-hl-0: #0000FF;
--dark-hl-0: #569CD6;
--light-hl-1: #000000;
--dark-hl-1: #D4D4D4;
--light-hl-2: #001080;
--dark-hl-2: #9CDCFE;
--light-hl-3: #795E26;
--dark-hl-3: #DCDCAA;
--light-hl-4: #A31515;
--dark-hl-4: #CE9178;
--light-hl-5: #008000;
--dark-hl-5: #6A9955;
--light-hl-6: #AF00DB;
--dark-hl-6: #C586C0;
--light-hl-7: #800000;
--dark-hl-7: #D7BA7D;
--light-hl-8: #800000;
--dark-hl-8: #569CD6;
--light-code-background: #FFFFFF;
--dark-code-background: #1E1E1E;
}
@media (prefers-color-scheme: light) { :root {
--hl-0: var(--light-hl-0);
--hl-1: var(--light-hl-1);
--hl-2: var(--light-hl-2);
--hl-3: var(--light-hl-3);
--hl-4: var(--light-hl-4);
--hl-5: var(--light-hl-5);
--hl-6: var(--light-hl-6);
--hl-7: var(--light-hl-7);
--hl-8: var(--light-hl-8);
--code-background: var(--light-code-background);
} }
@media (prefers-color-scheme: dark) { :root {
--hl-0: var(--dark-hl-0);
--hl-1: var(--dark-hl-1);
--hl-2: var(--dark-hl-2);
--hl-3: var(--dark-hl-3);
--hl-4: var(--dark-hl-4);
--hl-5: var(--dark-hl-5);
--hl-6: var(--dark-hl-6);
--hl-7: var(--dark-hl-7);
--hl-8: var(--dark-hl-8);
--code-background: var(--dark-code-background);
} }
body.light {
--hl-0: var(--light-hl-0);
--hl-1: var(--light-hl-1);
--hl-2: var(--light-hl-2);
--hl-3: var(--light-hl-3);
--hl-4: var(--light-hl-4);
--hl-5: var(--light-hl-5);
--hl-6: var(--light-hl-6);
--hl-7: var(--light-hl-7);
--hl-8: var(--light-hl-8);
--code-background: var(--light-code-background);
}
body.dark {
--hl-0: var(--dark-hl-0);
--hl-1: var(--dark-hl-1);
--hl-2: var(--dark-hl-2);
--hl-3: var(--dark-hl-3);
--hl-4: var(--dark-hl-4);
--hl-5: var(--dark-hl-5);
--hl-6: var(--dark-hl-6);
--hl-7: var(--dark-hl-7);
--hl-8: var(--dark-hl-8);
--code-background: var(--dark-code-background);
}
.hl-0 { color: var(--hl-0); }
.hl-1 { color: var(--hl-1); }
.hl-2 { color: var(--hl-2); }
.hl-3 { color: var(--hl-3); }
.hl-4 { color: var(--hl-4); }
.hl-5 { color: var(--hl-5); }
.hl-6 { color: var(--hl-6); }
.hl-7 { color: var(--hl-7); }
.hl-8 { color: var(--hl-8); }
pre, code { background: var(--code-background); }

View File

@ -1,16 +1,16 @@
@use '../syntax-accessible';
// Colors updated to match the standard Sass styling.
.typedoc pre { @extend .highlight; }
.typedoc pre { @extend .token; }
.hl-0 { @extend .k; }
.hl-1 { @extend .p !optional; }
.hl-2 { @extend .na; }
.hl-3 { @extend .nx !optional; }
.hl-4 { @extend .k; }
.hl-5 { @extend .s2; }
.hl-6 { @extend .k; }
.hl-7 { @extend .c1; }
.hl-8 { @extend .na; }
.hl-9 { @extend .nx !optional; }
.hl-10 { @extend .nb; }
.hl-0 { @extend .keyword; }
.hl-1 { @extend .punctuation; }
.hl-2 { @extend .variable; }
.hl-3 { @extend .function; }
.hl-4 { @extend .keyword; }
.hl-5 { @extend .string; }
.hl-6 { @extend .keyword; }
.hl-7 { @extend .comment; }
.hl-8 { @extend .variable; }
.hl-9 { @extend .comment; }
.hl-10 { @extend .variable; }

View File

@ -31,290 +31,6 @@ $sl-colors: (
midnight-blue: $sl-color--midnight-blue,
);
@function luminance($color) {
$red: list.nth($linear-channel-values, color.red($color) + 1);
$green: list.nth($linear-channel-values, color.green($color) + 1);
$blue: list.nth($linear-channel-values, color.blue($color) + 1);
@return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
}
@function contrast($back, $front) {
$backLum: luminance($back) + 0.05;
$foreLum: luminance($front) + 0.05;
@return math.div(max($backLum, $foreLum), min($backLum, $foreLum));
}
@function choose-contrast-color($color) {
$lightContrast: contrast($color, $sl-color--white);
$darkContrast: contrast($color, $sl-color--black);
@if $lightContrast > $darkContrast {
@return $sl-color--white;
} @else {
@return $sl-color--black;
}
}
/* prettier-ignore */
$linear-channel-values: 0
.0003035269835488375
.000607053967097675
.0009105809506465125
.00121410793419535
.0015176349177441874
.001821161901293025
.0021246888848418626
.0024282158683907
.0027317428519395373
.003035269835488375
.003346535763899161
.003676507324047436
.004024717018496307
.004391442037410293
.004776953480693729
.005181516702338386
.005605391624202723
.006048833022857054
.006512090792594475
.006995410187265387
.007499032043226175
.008023192985384994
.008568125618069307
.009134058702220787
.00972121732023785
.010329823029626936
.010960094006488246
.011612245179743885
.012286488356915872
.012983032342173012
.013702083047289686
.014443843596092545
.01520851442291271
.01599629336550963
.016807375752887384
.017641954488384078
.018500220128379697
.019382360956935723
.0202885630566524
.021219010376003555
.022173884793387385
.02315336617811041
.024157632448504756
.02518685962736163
.026241221894849898
.027320891639074894
.028426039504420793
.0295568344378088
.030713443732993635
.03189603307301153
.033104766570885055
.03433980680868217
.03560131487502034
.03688945040110004
.0382043715953465
.03954623527673284
.04091519690685319
.042311410620809675
.043735029256973465
.04518620438567554
.046665086336880095
.04817182422688942
.04970656598412723
.05126945837404324
.052860647023180246
.05448027644244237
.05612849004960009
.05780543019106723
.0595112381629812
.06124605423161761
.06301001765316767
.06480326669290577
.06662593864377289
.06847816984440017
.07036009569659588
.07227185068231748
.07421356838014963
.07618538148130785
.07818742180518633
.08021982031446832
.0822827071298148
.08437621154414882
.08650046203654976
.08865558628577294
.09084171118340768
.09305896284668745
.0953074666309647
.09758734714186246
.09989872824711389
.10224173308810132
.10461648409110419
.10702310297826761
.10946171077829933
.1119324278369056
.11443537382697373
.11697066775851084
.11953842798834562
.12213877222960187
.12477181756095049
.12743768043564743
.1301364766903643
.13286832155381798
.13563332965520566
.13843161503245183
.14126329114027164
.14412847085805777
.14702726649759498
.14995978981060856
.15292615199615017
.1559264637078274
.1589608350608804
.162029375639111
.1651321945016676
.16826940018969075
.1714411007328226
.17464740365558504
.17788841598362912
.18116424424986022
.184474994500441
.18782077230067787
.19120168274079138
.1946178304415758
.19806931955994886
.20155625379439707
.20507873639031693
.20863687014525575
.21223075741405523
.21586050011389926
.2195261997292692
.2232279573168085
.22696587351009836
.23074004852434915
.23455058216100522
.238397573812271
.24228112246555486
.24620132670783548
.25015828472995344
.25415209433082675
.2581828529215958
.26225065752969623
.26635560480286247
.2704977910130658
.27467731206038465
.2788942634768104
.2831487404299921
.2874408377269175
.29177064981753587
.2961382707983211
.3005437944157765
.3049873140698863
.30946892281750854
.31398871337571754
.31854677812509186
.32314320911295075
.3277780980565422
.33245153634617935
.33716361504833037
.3419144249086609
.3467040563550296
.35153259950043936
.3564001441459435
.3613067797835095
.3662525955988395
.3712376804741491
.3762621229909065
.38132601143253014
.386429433787049
.39157247774972326
.39675523072562685
.4019777798321958
.4072402119017367
.41254261348390375
.4178850708481375
.4232676699860717
.4286904966139066
.43415363617474895
.4396571738409188
.44520119451622786
.45078578283822346
.45641102318040466
.4620769996544071
.467783796112159
.47353149614800955
.4793201831008268
.4851499400560704
.4910208498478356
.4969329950608704
.5028864580325687
.5088813208549338
.5149176653765214
.5209955732043543
.5271151257058131
.5332764040105052
.5394794890121072
.5457244613701866
.5520114015120001
.5583403896342679
.5647115057049292
.5711248294648731
.5775804404296506
.5840784178911641
.5906188409193369
.5972017883637634
.6038273388553378
.6104955708078648
.6172065624196511
.6239603916750761
.6307571363461468
.6375968739940326
.6444796819705821
.6514056374198242
.6583748172794485
.665387298282272
.6724431569576875
.6795424696330938
.6866853124353135
.6938717612919899
.7011018919329731
.7083757798916868
.7156935005064807
.7230551289219693
.7304607400903537
.7379104087727308
.7454042095403874
.7529422167760779
.7605245046752924
.768151147247507
.7758222183174236
.7835377915261935
.7912979403326302
.799102738014409
.8069522576692516
.8148465722161012
.8227857543962835
.8307698767746546
.83879901174074
.846873231509858
.8549926081242338
.8631572134541023
.8713671191987972
.8796223968878317
.8879231178819663
.8962693533742664
.9046611743911496
.9130986517934192
.9215818562772946
.9301108583754237
.938685728457888
.9473065367331999
.9559733532492861
.9646862478944651
.9734452903984125
.9822505503331171
.9911020971138298
1;
@each $name, $value in $sl-colors {
// to avoid Sass yelling at using 'white' or 'black' as a color name
.sl-background--#{'' + $name} {
@ -328,6 +44,8 @@ $linear-channel-values: 0
}
html {
@include config.tokens(config.$brand-colors);
@include config.tokens(config.$content-colors, 'sl-');
@include config.tokens(config.$scale, 'sl-');
background: #f8f9fa
@ -345,6 +63,7 @@ body {
a {
border-bottom: var(--sl-border--small) solid rgba($sl-color--iron, 0.5);
background: var(--color-link-bg, transparent);
color: $sl-color--midnight-blue;
.c1 & {
@ -353,8 +72,9 @@ a {
&:hover,
&:focus {
--color-link-bg: var(--sl-color-link--action);
border-bottom-color: rgba($sl-color--iron, 0.75);
background: rgba($sl-color--iron, 0.25);
}
&:active {
@ -365,7 +85,7 @@ a {
code,
pre {
border-radius: var(--sl-border-radius--small);
color: color.adjust($sl-color--pale-sky, $lightness: -25%);
color: var(--sl-color-code--text);
a & {
color: inherit;

140
yarn.lock
View File

@ -33,6 +33,16 @@ __metadata:
languageName: node
linkType: hard
"@11ty/eleventy-plugin-syntaxhighlight@npm:^4.2.0":
version: 4.2.0
resolution: "@11ty/eleventy-plugin-syntaxhighlight@npm:4.2.0"
dependencies:
linkedom: ^0.14.19
prismjs: ^1.29.0
checksum: 6109f5f68bed0286b1cec572808b1239c1442baf04d3db78de21e3bbdef920ef7985dd3643f28282a12db894bebed5207bf171823b7bb98f4b71fb66169e4fac
languageName: node
linkType: hard
"@11ty/eleventy-utils@npm:^1.0.1":
version: 1.0.1
resolution: "@11ty/eleventy-utils@npm:1.0.1"
@ -2343,6 +2353,13 @@ __metadata:
languageName: node
linkType: hard
"boolbase@npm:^1.0.0":
version: 1.0.0
resolution: "boolbase@npm:1.0.0"
checksum: 3e25c80ef626c3a3487c73dbfc70ac322ec830666c9ad915d11b701142fab25ec1e63eff2c450c74347acfd2de854ccde865cd79ef4db1683f7c7b046ea43bb0
languageName: node
linkType: hard
"brace-expansion@npm:^1.1.7":
version: 1.1.11
resolution: "brace-expansion@npm:1.1.11"
@ -2698,6 +2715,19 @@ __metadata:
languageName: node
linkType: hard
"css-select@npm:^5.1.0":
version: 5.1.0
resolution: "css-select@npm:5.1.0"
dependencies:
boolbase: ^1.0.0
css-what: ^6.1.0
domhandler: ^5.0.2
domutils: ^3.0.1
nth-check: ^2.0.1
checksum: 2772c049b188d3b8a8159907192e926e11824aea525b8282981f72ba3f349cf9ecd523fdf7734875ee2cb772246c22117fc062da105b6d59afe8dcd5c99c9bda
languageName: node
linkType: hard
"css-tree@npm:^2.3.1":
version: 2.3.1
resolution: "css-tree@npm:2.3.1"
@ -2708,6 +2738,13 @@ __metadata:
languageName: node
linkType: hard
"css-what@npm:^6.1.0":
version: 6.1.0
resolution: "css-what@npm:6.1.0"
checksum: b975e547e1e90b79625918f84e67db5d33d896e6de846c9b584094e529f0c63e2ab85ee33b9daffd05bff3a146a1916bec664e18bb76dd5f66cbff9fc13b2bbe
languageName: node
linkType: hard
"cssesc@npm:^3.0.0":
version: 3.0.0
resolution: "cssesc@npm:3.0.0"
@ -2717,6 +2754,13 @@ __metadata:
languageName: node
linkType: hard
"cssom@npm:^0.5.0":
version: 0.5.0
resolution: "cssom@npm:0.5.0"
checksum: 823471aa30091c59e0a305927c30e7768939b6af70405808f8d2ce1ca778cddcb24722717392438329d1691f9a87cb0183b64b8d779b56a961546d54854fde01
languageName: node
linkType: hard
"date-fns@npm:^2.29.3":
version: 2.29.3
resolution: "date-fns@npm:2.29.3"
@ -2902,7 +2946,18 @@ __metadata:
languageName: node
linkType: hard
"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0":
"dom-serializer@npm:^2.0.0":
version: 2.0.0
resolution: "dom-serializer@npm:2.0.0"
dependencies:
domelementtype: ^2.3.0
domhandler: ^5.0.2
entities: ^4.2.0
checksum: cd1810544fd8cdfbd51fa2c0c1128ec3a13ba92f14e61b7650b5de421b88205fd2e3f0cc6ace82f13334114addb90ed1c2f23074a51770a8e9c1273acbc7f3e6
languageName: node
linkType: hard
"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0, domelementtype@npm:^2.3.0":
version: 2.3.0
resolution: "domelementtype@npm:2.3.0"
checksum: ee837a318ff702622f383409d1f5b25dd1024b692ef64d3096ff702e26339f8e345820f29a68bcdcea8cfee3531776b3382651232fbeae95612d6f0a75efb4f6
@ -2918,6 +2973,15 @@ __metadata:
languageName: node
linkType: hard
"domhandler@npm:^5.0.1, domhandler@npm:^5.0.2":
version: 5.0.3
resolution: "domhandler@npm:5.0.3"
dependencies:
domelementtype: ^2.3.0
checksum: 0f58f4a6af63e6f3a4320aa446d28b5790a009018707bce2859dcb1d21144c7876482b5188395a188dfa974238c019e0a1e610d2fc269a12b2c192ea2b0b131c
languageName: node
linkType: hard
"domutils@npm:^2.8.0":
version: 2.8.0
resolution: "domutils@npm:2.8.0"
@ -2929,6 +2993,17 @@ __metadata:
languageName: node
linkType: hard
"domutils@npm:^3.0.1":
version: 3.0.1
resolution: "domutils@npm:3.0.1"
dependencies:
dom-serializer: ^2.0.0
domelementtype: ^2.3.0
domhandler: ^5.0.1
checksum: 23aa7a840572d395220e173cb6263b0d028596e3950100520870a125af33ff819e6f609e1606d6f7d73bd9e7feb03bb404286e57a39063b5384c62b724d987b3
languageName: node
linkType: hard
"ee-first@npm:1.1.1":
version: 1.1.1
resolution: "ee-first@npm:1.1.1"
@ -3001,6 +3076,13 @@ __metadata:
languageName: node
linkType: hard
"entities@npm:^4.2.0, entities@npm:^4.3.0":
version: 4.4.0
resolution: "entities@npm:4.4.0"
checksum: 84d250329f4b56b40fa93ed067b194db21e8815e4eb9b59f43a086f0ecd342814f6bc483de8a77da5d64e0f626033192b1b4f1792232a7ea6b970ebe0f3187c2
languageName: node
linkType: hard
"env-paths@npm:^2.2.0":
version: 2.2.1
resolution: "env-paths@npm:2.2.1"
@ -3955,6 +4037,13 @@ __metadata:
languageName: node
linkType: hard
"html-escaper@npm:^3.0.3":
version: 3.0.3
resolution: "html-escaper@npm:3.0.3"
checksum: a2678be42c15d2ef6e629775dac0925a729f4615c6593db8358b9262c7565c4627134987c00f548eb4eb76cbc3b3392f78475cd02b022f8ae7aeb9a88280831b
languageName: node
linkType: hard
"html-tags@npm:^3.2.0":
version: 3.2.0
resolution: "html-tags@npm:3.2.0"
@ -3974,6 +4063,18 @@ __metadata:
languageName: node
linkType: hard
"htmlparser2@npm:^8.0.1":
version: 8.0.1
resolution: "htmlparser2@npm:8.0.1"
dependencies:
domelementtype: ^2.3.0
domhandler: ^5.0.2
domutils: ^3.0.1
entities: ^4.3.0
checksum: 06d5c71e8313597722bc429ae2a7a8333d77bd3ab07ccb916628384b37332027b047f8619448d8f4a3312b6609c6ea3302a4e77435d859e9e686999e6699ca39
languageName: node
linkType: hard
"http-cache-semantics@npm:^4.1.0":
version: 4.1.1
resolution: "http-cache-semantics@npm:4.1.1"
@ -4701,6 +4802,19 @@ __metadata:
languageName: node
linkType: hard
"linkedom@npm:^0.14.19":
version: 0.14.22
resolution: "linkedom@npm:0.14.22"
dependencies:
css-select: ^5.1.0
cssom: ^0.5.0
html-escaper: ^3.0.3
htmlparser2: ^8.0.1
uhyphen: ^0.1.0
checksum: 56024a50ac69e5a232a0679a52069dfd5cb211147f46b9fe30573464b02703bc88dc89a5362fa445b04c38d9d58029f307797ede5cb55a98c648869e5ce08e8b
languageName: node
linkType: hard
"linkify-it@npm:^4.0.1":
version: 4.0.1
resolution: "linkify-it@npm:4.0.1"
@ -5384,6 +5498,15 @@ __metadata:
languageName: node
linkType: hard
"nth-check@npm:^2.0.1":
version: 2.1.1
resolution: "nth-check@npm:2.1.1"
dependencies:
boolbase: ^1.0.0
checksum: 5afc3dafcd1573b08877ca8e6148c52abd565f1d06b1eb08caf982e3fa289a82f2cae697ffb55b5021e146d60443f1590a5d6b944844e944714a5b549675bcd3
languageName: node
linkType: hard
"nunjucks@npm:^3.2.3":
version: 3.2.3
resolution: "nunjucks@npm:3.2.3"
@ -5816,6 +5939,13 @@ __metadata:
languageName: node
linkType: hard
"prismjs@npm:^1.29.0":
version: 1.29.0
resolution: "prismjs@npm:1.29.0"
checksum: 007a8869d4456ff8049dc59404e32d5666a07d99c3b0e30a18bd3b7676dfa07d1daae9d0f407f20983865fd8da56de91d09cb08e6aa61f5bc420a27c0beeaf93
languageName: node
linkType: hard
"promise-each@npm:^2.2.0":
version: 2.2.0
resolution: "promise-each@npm:2.2.0"
@ -6307,6 +6437,7 @@ __metadata:
resolution: "sass-site@workspace:."
dependencies:
"@11ty/eleventy": ^2.0.0
"@11ty/eleventy-plugin-syntaxhighlight": ^4.2.0
"@babel/core": ^7.20.12
"@babel/preset-env": ^7.20.2
"@babel/preset-typescript": ^7.18.6
@ -7180,6 +7311,13 @@ __metadata:
languageName: node
linkType: hard
"uhyphen@npm:^0.1.0":
version: 0.1.0
resolution: "uhyphen@npm:0.1.0"
checksum: 1df304800387900f76365ff8090ee3667534a944184b9330cd96dbf4b1ad3fb0d376969f92f8b03decfc2e701f0d2eabeda7d002c909f2d125062e5e064d23ef
languageName: node
linkType: hard
"unbox-primitive@npm:^1.0.2":
version: 1.0.2
resolution: "unbox-primitive@npm:1.0.2"