@use '../config'; @use 'sass:math'; @use 'sass:color'; @use 'sass:list'; @use '../functions'; $sl-color--hopbush: #c69 !default; $sl-color--bouquet: #b37399 !default; $sl-color--venus: #998099 !default; $sl-color--patina: #699 !default; $sl-color--nebula: #d2e1dd !default; $sl-color--white: white !default; $sl-color--dawn-pink: #f2ece4 !default; $sl-color--wafer: #e1d7d2 !default; $sl-color--iron: #dadbdf !default; $sl-color--regent-grey: #808c99 !default; $sl-color--pale-sky: #6b717f !default; $sl-color--midnight-blue: #036 !default; $sl-colors: ( hopbush: $sl-color--hopbush, bouquet: $sl-color--bouquet, venus: $sl-color--venus, patina: $sl-color--patina, nebula: $sl-color--nebula, white: $sl-color--white, dawn-pink: $sl-color--dawn-pink, wafer: $sl-color--wafer, iron: $sl-color--iron, regent-grey: $sl-color--regent-grey, pale-sky: $sl-color--pale-sky, 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} { background: $value; } // to avoid Sass yelling at using 'white' or 'black' as a color name .sl-color--#{'' + $name} { color: $value; } } html { @include config.tokens(config.$scale); background: #f8f9fa url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23f1f3f5' fill-opacity='0.47' fill-rule='evenodd'/%3E%3C/svg%3E"); } body { background: transparent; color: $sl-color--pale-sky; } ::selection { background: $sl-color--iron; } a { border-bottom: var(--border-small) solid rgba($sl-color--iron, 0.5); color: $sl-color--midnight-blue; .c1 & { color: inherit; } &:hover, &:focus { border-bottom-color: rgba($sl-color--iron, 0.75); background: rgba($sl-color--iron, 0.25); } &:active { border-bottom-color: $sl-color--iron; } } code, pre { border-radius: var(--border-radius-small); color: color.adjust($sl-color--pale-sky, $lightness: -25%); a & { color: inherit; } } pre { border: var(--border-small) solid #ebebeb; background: rgba($sl-color--midnight-blue, 0.0625); }