argyleink

An issue we’ve heard from authors is that they want to know what scrollbars are doing and respond to that.

There’s a bunch of issues that might go hand in hand to actually solve this:

1. [^1] Expose an env() variable that allows you to get the scrollbar-size. This is a fixed value, independent of whether a scrollbar is shown or not – it just gives you back the size
2. [^2] A way to query which type of scrollbars are being used on the page.
3. A container state query to be able to know if something is overflowing or not

If you combine these three, authors can do things like:

argyleink

figcaption {
  background: linear-gradient(to top, 
    hsla(0 0% 0% / 90%), 
    75%, /* <color-hint> */
    hsla(0 0% 0% / 0)
  );  
}

argyleink

div {
  background: conic-gradient(at top right, deeppink, rebeccapurple);
}

argyleink

/* HSL's 50% lightness */

/* middle grey */
hsl(0 0% 50%)
lab(53.39% 0 -0.01)
/* 3.94:1 ❌ */

/* lime */
hsl(100 100% 50%)
lab(88.66% -77.99 84.31)

argyleink

/* before :is() */
button.focus,
button:focus {
  ...
}

/* after :is() */
button:is(.focus, :focus) {
  ...
}

argyleink

main {
  /*  writing mode contextual shorthand for border-top and border-bottom respectively   */
  border-block: 1px solid hotpink;
  
  /*  writing mode contextual shorthand for border-left and border-right respectively   */
  border-inline: 1px solid hotpink;
}

argyleink

foo {
  color: hsl(100,80%,75%);
  background-color: hsl(100,20%,25%);
}

foo.map(styles => ({
  ...styles,
  color: 'hsl(100,80%,75%)',
  background-color: 'hsl(100,20%,25%)',
}))

argyleink

const clone     = x => [...x]
const push      = y => x => [...x, y]
const pop       = x => x.slice(0,-1)
const unshift   = y => x => [y, ...x]
const shift     = x => x.slice(1)
const sort      = f => x => [...x].sort(f)
const delete    = i => x => [...x.slice(0,i), ...x.slice(i+1)]
const splice    = (s,c,...y) => x => [...x.slice(0,s), ...y, ...x.slice(s+c)]
const unique    = arr => [...new Set(arr)]

argyleink

export default class CustomElement extends HTMLElement {
  
  constructor() {
    super()
    this.$shadow            = this.attachShadow()
    this.$shadow.innerHTML  = this.render()
  }

  connectedCallback() {}
  disconnectedCallback() {}

argyleink

1. Install Package Resource Viewer.
2. In package control window select ‘Package Resource Viewer: Open Resource’.
3. Scroll down until you find the option: ‘Color Scheme — Default’ (or your theme with color scheme .tmTheme) and select it.
4. Add the following to the end of the node to style selected (scope) syntax tokens cursive:

<dict>
	<key>name</key>
	<string>Mono Tweaks</string>
	scope