ericwbailey

$_color-outline: saturate($brand-primary, 20%);

.component {
  border: 2px solid $color-outline;
  // Other component code
}

ericwbailey

$crimson: #a51c30;
// Other color variables

$brand-primary: $crimson;

ericwbailey

.c-tab {
  border: 1px solid c(tab, border);
  color: c(tab, type);
  padding: 1rem 3rem;

  a {
    color: c(tab, link);
  }
}

ericwbailey

@function c(
  $name,
  $theme:null,
  $component:null,
) {
  // Retrieve a palette color value
  @if ($theme == null) and ($component == null) {
    @return map-get($colors, $name);
  }
  // Retrieve a component color value

ericwbailey

$colors: (
  blue:  #007aff,
  green: #4cd964,
  red:   #ff3b30,

  tab: (
    border: hsla(3, 100%, 59%, 0.50),
    type:   #8e8e93
  )
);

ericwbailey

<div class="card">
  <a href="/foo" class="card__link" aria-labelledby="card-1234-title">
    <h2 class="card__title" id="card-1234-title">The Card Title</h2>
    <img class="card__image" src="/some/image.jpg" alt="">
    <small class="card__meta">Some category</small>
    <p class="card_summary">Lorem ipsum, dolor sit amet!</p>
  </a>
</div>

ericwbailey

{"lastUpload":"2021-10-19T01:18:14.578Z","extensionVersion":"v3.4.3"}

ericwbailey

/*
 * Archives
 * A compressed collection of data.
*/
a[href$=".7z"],
a[href$=".cab"],
a[href$=".gz"],
a[href$=".lzh"],
a[href$=".rar"],
a[href$=".tar"],

ericwbailey

{
  "caps-to-small-caps": {
    "name":        "Caps to Small Caps",
    "category":    "Common",
    "example":     "asfab ASFAB Asfab",
    "description": "",
    "more-info":   ""
  },
  "case-sensitive-forms": {
    "name":        "Case Sensitive Forms",

ericwbailey

Screen Readers

• NVDA (Windows): https://www.nvaccess.org/
• Narrator (Windows): https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started
• VoiceOver (Mac): https://help.apple.com/voiceover/info/guide/10.12/
• ChromeVox

Accessibility Checkers

• https://www.deque.com/products/axe/
• http://wave.webaim.org/extension/