oui-kit/stylus/mixins/text.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "./base.styl";

user-select(value) {
  user-select: value;
  -webkit-user-select: value;
}

font-size(value = base) {
  if value is a "unit" {
    font-size: rex(value);
  } else {
    font-size: 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";
}

ellipsis(no-wrap = true) {
  if no-wrap {
    white-space: nowrap;
  }

  overflow: hidden;
  text-overflow: ellipsis;
}

// 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;
} /*
// 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;
*/


/*
-letter-spacing-tighter = -0.05em; // tailwindcss.com/docs/letter-spacing
// https://tailwindcss.com/docs/letter-spacing
-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;
}
}
*/