twindy/src/mixins/text.styl

CSS Framework written in Stylus inspired by Tailwind and NIB

// (C)opyright 2020-11-18 Dirk Holtwick, holtwick.it. All rights reserved.
@require "base.styl";
@require "colors.styl";

-font-sans = ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-font-serif = ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-font-mono = ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-font-monospace = -font-mono;

:root {
  --font-sans: -font-sans;
  --font-serif: -font-serif;
  --font-mono: -font-mono;
}

font-family(value = sans) {
  if value is a "ident" && lookup("-font-" + value) {
    font-family: lookup("-font-" + value);
  } else {
    font-family: value;
  }
}

// https://www.smashingmagazine.com/2019/12/ui-design-tips-speed-up-workflow/
-font-size-sm-2 = px(12);
-font-size-sm-1 = px(14);
-font-size-lg-1 = px(18);
-font-size-lg-2 = px(20);
-font-size-lg-3 = px(24);
-font-size-lg-4 = px(30);
-font-size-lg-5 = px(36);
-font-size-lg-6 = px(48);
-font-size-lg-7 = px(60);
-font-size-lg-8 = px(72);
// 
-font-size-xs = px(12);
-font-size-sm = px(14);
-font-size-base = px(16);
-font-size-lg = 1.125rem;
-font-size-xl = 1.25rem;
-font-size-2xl = 1.5rem;
-font-size-3xl = 1.875rem;
-font-size-4xl = 2.25rem;
-font-size-5xl = 3rem;
-font-size-6xl = 4rem;

font-size(value = base) {
  if lookup("-font-size-" + value) {
    font-size: lookup("-font-size-" + value);
  } else if value is a "unit" {
    font-size: rex(value);
  } else {
    font-size: value;
  }
}

-font-weight-thin = 100;
-font-weight-extra-light = 200;
-font-weight-light = 300;
-font-weight-normal = 400;
-font-weight-medium = 500;
-font-weight-semi-bold = 600;
-font-weight-bold = 700;
-font-weight-extra-bold = 800;
-font-weight-black = 900;
-font-weight-extra-black = 950;
-font-weight-extralight = -font-weight-extra-light;
-font-weight-semibold = -font-weight-semi-bold;
-font-weight-semi = -font-weight-semi-bold;
-font-weight-extrabold = -font-weight-extra-bold;
-font-weight-extrablack = -font-weight-extra-black;

font-weight(value = normal) {
  if lookup("-font-weight-" + value) {
    font-weight: lookup("-font-weight-" + value);
  } else {
    font-weight: value;
  }
}

// https://tailwindcss.com/docs/letter-spacing
-letter-spacing-tighter = -0.05em;
-letter-spacing-tight = -0.025em;
-letter-spacing-normal = 0;
-letter-spacing-wide = 0.025em;
-letter-spacing-wider = 0.05em;
-letter-spacing-widest = 0.1em;

letter-spacing(value = normal) {
  if lookup("-letter-spacing-" + value) {
    letter-spacing: lookup("-letter-spacing-" + value);
  } else {
    letter-spacing: value;
  }
}

break-normal() {
  word-break: normal;
  overflow-wrap: normal;
}

// Break on words, for long words also wrap inside. Good for chat messages
break-words() {
  word-break: normal;
  overflow-wrap: anywhere;
}

break-all() {
  word-break: break-all;
}

// 
font-tabular-numbers() {
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

// 
no-wrap = unquote("nowrap");

whitespace() {
  white-space: arguments;
}

// Ellipsis with wrapping disabled by default.
ellipsis(no-wrap = true) {
  if no-wrap {
    white-space: nowrap;
  }

  overflow: hidden;
  text-overflow: ellipsis;
}

// Screen Readers
// https://tailwindcss.com/docs/screen-readers
screen-reader-only(sr = true) {
  if sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  } else {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

invisible() { // but selectable
  // Due to scroll issues on WebKit and Mozilla it should not be hidden completely, otherwise unexpected things
  // will happen when tabbing around
  position: fixed;
  width: 1px;
  height: 1px;
  pointer-events: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  // clip: rect(1px, 1px, 1px, 1px);
  clip: rect(0, 0, 0, 0);
  border: 0;
  display: block;
  visibility: visible;
  white-space: nowrap;
}

text-primary() {
  color: -gray-900;

  @media -dark {
    color: white;
  }
}

text-secondary() {
  color: -gray-700;

  @media -dark {
    color: -gray-200;
  }
}