argyleink

[{"name":"--blue-0","syntax":"<color>","initialValue":"#e7f5ff","inherits":false},{"name":"--blue-1","syntax":"<color>","initialValue":"#d0ebff","inherits":false},{"name":"--blue-2","syntax":"<color>","initialValue":"#a5d8ff","inherits":false},{"name":"--blue-3","syntax":"<color>","initialValue":"#74c0fc","inherits":false},{"name":"--blue-4","syntax":"<color>","initialValue":"#4dabf7","inherits":false},{"name":"--blue-5","syntax":"<color>","initialValue":"#339af0","inherits":false},{"name":"--blue-6","syntax":"<color>","initialValue":"#228be6","inherits":false},{"name":"--blue-7","syntax":"<color>","initialValue":"#1c7ed6","inherits":false},{"name":"--blue-8","syntax":"<color>","initialValue":"#1971c2","inherits":false},{"name":"--blue-9","syntax":"<color>","initialValue":"#1864ab","inherits":false},{"name":"--blue-10","syntax":"<color>","initialValue":"#145591","inherits":false},{"name":"--blue-11","syntax":"<color>","initialValue":"#114678","inherits":false},{"name":"--blue-12","syntax":"<color>","initialVa

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() {}