@cfx-dev/ui-components 1.0.0 → 2.0.1

package/dist/style-guide/Colors/ColorVariationsShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function ColorVariationsShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ColorVariationsShowcase>;
+export default _default;

package/dist/style-guide/Colors/ColorVariationsShowcase.js

@@ -0,0 +1,43 @@
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import e from "react";
+import M, { COLOR_NAMES as r, THEME_NAMES as i, COLOR_LUMINANCES as m } from "./ColorShowcase.js";
+import { Select as t } from "../../components/Select/Select.js";
+import '../../assets/ColorVariationsShowcase.css';const O = "_root_1rsbp_1", g = "_controls_1rsbp_1", u = {
+  root: O,
+  controls: g
+};
+function L() {
+  const [n, h] = e.useState(r[0]), [a, C] = e.useState(i[0]), [l, p] = e.useState(m[0]), _ = e.useMemo(() => r.map((o) => ({
+    value: o,
+    label: o
+  })), []), S = e.useMemo(() => i.map((o) => ({
+    value: o,
+    label: o
+  })), []), d = e.useMemo(() => m.map((o) => ({
+    value: o,
+    label: o
+  })), []), b = e.useCallback((o) => {
+    h(o);
+  }, []), v = e.useCallback((o) => {
+    C(o);
+  }, []), f = e.useCallback((o) => {
+    p(o);
+  }, []);
+  return /* @__PURE__ */ c("div", { className: u.root, children: [
+    /* @__PURE__ */ c("div", { className: u.controls, children: [
+      "Color ",
+      /* @__PURE__ */ s(t, { options: _, value: n, onChange: b }),
+      " ",
+      " Theme ",
+      /* @__PURE__ */ s(t, { options: S, value: a, onChange: v }),
+      " ",
+      " Luminance ",
+      /* @__PURE__ */ s(t, { options: d, value: l, onChange: f })
+    ] }),
+    /* @__PURE__ */ s(M, { color: n, theme: a, luminance: l })
+  ] });
+}
+const x = e.memo(L);
+export {
+  x as default
+};

package/dist/style-guide/Colors/ColorsShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function ColorsShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ColorsShowcase>;
+export default _default;

package/dist/style-guide/Colors/ColorsShowcase.js

@@ -0,0 +1,43 @@
+import { jsxs as _, jsx as c, Fragment as e } from "react/jsx-runtime";
+import a from "react";
+import f, { THEME_NAMES as d, COLOR_NAMES as n } from "./ColorShowcase.js";
+import '../../assets/ColorsShowcase.css';const i = "_root_dind7_349", x = "_colorLableTop_dind7_355", t = "_colorLableLeft_dind7_363", r = {
+  "cfxui-theme-cfx": "_cfxui-theme-cfx_dind7_1",
+  "cfx-color-primary": "_cfx-color-primary_dind7_279",
+  "cfx-color-success": "_cfx-color-success_dind7_282",
+  "cfx-color-warning": "_cfx-color-warning_dind7_285",
+  "cfx-color-error": "_cfx-color-error_dind7_288",
+  "cfx-color-teal": "_cfx-color-teal_dind7_291",
+  "cfx-color-aurum": "_cfx-color-aurum_dind7_294",
+  "cfx-color-silver": "_cfx-color-silver_dind7_297",
+  "cfx-color-accent": "_cfx-color-accent_dind7_300",
+  "cfx-color-secondary": "_cfx-color-secondary_dind7_306",
+  "cfx-color-tertiary": "_cfx-color-tertiary_dind7_309",
+  "cfx-color-green": "_cfx-color-green_dind7_312",
+  "cfx-color-yellow": "_cfx-color-yellow_dind7_315",
+  "cfx-color-red": "_cfx-color-red_dind7_318",
+  "cfx-color-argentum": "_cfx-color-argentum_dind7_321",
+  "cfx-color-platinum": "_cfx-color-platinum_dind7_327",
+  "cfx-color-bg": "_cfx-color-bg_dind7_330",
+  "cfx-color-bg-light": "_cfx-color-bg-light_dind7_333",
+  "cfx-color-bg-dark": "_cfx-color-bg-dark_dind7_336",
+  "cfx-color-bg-dark-grey": "_cfx-color-bg-dark-grey_dind7_339",
+  "cfx-color-bg-black": "_cfx-color-bg-black_dind7_342",
+  root: i,
+  colorLableTop: x,
+  colorLableLeft: t
+};
+function s() {
+  return /* @__PURE__ */ _("div", { className: r.root, children: [
+    /* @__PURE__ */ c("div", { className: r.colorLableTop, children: " " }),
+    d.map((o) => /* @__PURE__ */ c("div", { className: r.colorLableTop, children: o }, o)),
+    n.map((o) => /* @__PURE__ */ _(e, { children: [
+      /* @__PURE__ */ c("div", { className: r.colorLableLeft, children: o }),
+      d.map((l) => /* @__PURE__ */ c(f, { color: o, theme: l, alpha: "100" }, `ColorShowcase${l}`))
+    ] }))
+  ] });
+}
+const p = a.memo(s);
+export {
+  p as default
+};

package/dist/style-guide/Layout/ControlHeightShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function ControlHeightShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ControlHeightShowcase>;
+export default _default;

package/dist/style-guide/Layout/ControlHeightShowcase.js

@@ -0,0 +1,27 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import a from "react";
+import '../../assets/ControlHeightShowcase.css';const c = "_showcaseBlock_m08sq_4", h = "_showcaseBlockLabel_m08sq_11", n = "_root_m08sq_53", i = "_controlheightBlockOuter_m08sq_65", l = {
+  showcaseBlock: c,
+  showcaseBlockLabel: h,
+  "var-controlheight-xxsmall": "_var-controlheight-xxsmall_m08sq_17",
+  "var-controlheight-xsmall": "_var-controlheight-xsmall_m08sq_23",
+  "var-controlheight-small": "_var-controlheight-small_m08sq_29",
+  "var-controlheight-normal": "_var-controlheight-normal_m08sq_35",
+  "var-controlheight-large": "_var-controlheight-large_m08sq_41",
+  "var-controlheight-xlarge": "_var-controlheight-xlarge_m08sq_47",
+  root: n,
+  controlheightBlockOuter: i
+}, _ = Object.entries(l).reduce((o, [t, r]) => (t.startsWith("var-controlheight") && o.push({
+  label: t.replace("var-controlheight-", "").replace(/-/g, ""),
+  value: r
+}), o), []);
+function m() {
+  return /* @__PURE__ */ e("div", { className: l.root, children: _.map((o) => /* @__PURE__ */ s("div", { className: l.showcaseBlock, children: [
+    /* @__PURE__ */ e("div", { className: l.controlheightBlockOuter, children: /* @__PURE__ */ e("div", { className: o.value }) }),
+    /* @__PURE__ */ e("div", { className: l.showcaseBlockLabel, children: o.label })
+  ] }, o.value)) });
+}
+const u = a.memo(m);
+export {
+  u as default
+};

package/dist/style-guide/Layout/OffsetShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function OffsetShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof OffsetShowcase>;
+export default _default;

package/dist/style-guide/Layout/OffsetShowcase.js

@@ -0,0 +1,32 @@
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import t from "react";
+import '../../assets/OffsetShowcase.css';const l = "_showcaseBlock_1r16g_4", _ = "_showcaseBlockLabel_1r16g_11", c = "_root_1r16g_83", v = "_offsetBlockOuter_1r16g_95", s = {
+  showcaseBlock: l,
+  showcaseBlockLabel: _,
+  "var-offset-none": "_var-offset-none_1r16g_17",
+  "var-offset-hairthin": "_var-offset-hairthin_1r16g_23",
+  "var-offset-thin": "_var-offset-thin_1r16g_29",
+  "var-offset-xxsmall": "_var-offset-xxsmall_1r16g_35",
+  "var-offset-xsmall": "_var-offset-xsmall_1r16g_41",
+  "var-offset-small": "_var-offset-small_1r16g_47",
+  "var-offset-normal": "_var-offset-normal_1r16g_53",
+  "var-offset-medium": "_var-offset-medium_1r16g_59",
+  "var-offset-large": "_var-offset-large_1r16g_65",
+  "var-offset-xlarge": "_var-offset-xlarge_1r16g_71",
+  "var-offset-safezone": "_var-offset-safezone_1r16g_77",
+  root: c,
+  offsetBlockOuter: v
+}, n = Object.entries(s).reduce((e, [a, r]) => (a.startsWith("var-offset") && e.push({
+  label: a.replace("var-offset-", "").replace(/-/g, ""),
+  value: r
+}), e), []);
+function h() {
+  return /* @__PURE__ */ o("div", { className: s.root, children: n.map((e) => /* @__PURE__ */ f("div", { className: s.showcaseBlock, children: [
+    /* @__PURE__ */ o("div", { className: s.offsetBlockOuter, children: /* @__PURE__ */ o("div", { className: e.value }) }),
+    /* @__PURE__ */ o("div", { className: s.showcaseBlockLabel, children: e.label })
+  ] }, e.value)) });
+}
+const g = t.memo(h);
+export {
+  g as default
+};

package/dist/style-guide/Layout/QuantShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function QuantShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof QuantShowcase>;
+export default _default;

package/dist/style-guide/Layout/QuantShowcase.js

@@ -0,0 +1,36 @@
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import r from "react";
+import '../../assets/QuantShowcase.css';const t = "_showcaseBlock_a7dbr_1", _ = "_showcaseBlockLabel_a7dbr_8", s = "_root_a7dbr_80", u = "_quantBlockOuter_a7dbr_92", n = {
+  showcaseBlock: t,
+  showcaseBlockLabel: _,
+  "quantBlockInner-1": "_quantBlockInner-1_a7dbr_14",
+  "quantBlockInner-2": "_quantBlockInner-2_a7dbr_20",
+  "quantBlockInner-3": "_quantBlockInner-3_a7dbr_26",
+  "quantBlockInner-4": "_quantBlockInner-4_a7dbr_32",
+  "quantBlockInner-5": "_quantBlockInner-5_a7dbr_38",
+  "quantBlockInner-6": "_quantBlockInner-6_a7dbr_44",
+  "quantBlockInner-7": "_quantBlockInner-7_a7dbr_50",
+  "quantBlockInner-8": "_quantBlockInner-8_a7dbr_56",
+  "quantBlockInner-9": "_quantBlockInner-9_a7dbr_62",
+  "quantBlockInner-10": "_quantBlockInner-10_a7dbr_68",
+  "quantBlockInner-05": "_quantBlockInner-05_a7dbr_74",
+  root: s,
+  quantBlockOuter: u
+}, e = Array.from({ length: 10 }, (a, c) => ({
+  label: String(c + 1),
+  value: String(c + 1)
+}));
+e.unshift({
+  label: "0.5",
+  value: "05"
+});
+function k() {
+  return /* @__PURE__ */ o("div", { className: n.root, children: e.map((a) => /* @__PURE__ */ l("div", { className: n.showcaseBlock, children: [
+    /* @__PURE__ */ o("div", { className: n.quantBlockOuter, children: /* @__PURE__ */ o("div", { className: n[`quantBlockInner-${a.value}`] }) }),
+    /* @__PURE__ */ o("div", { className: n.showcaseBlockLabel, children: a.label })
+  ] }, a.value)) });
+}
+const d = r.memo(k);
+export {
+  d as default
+};

package/dist/styles-scss/_typography.scss

@@ -0,0 +1,52 @@
+/**
+ * woff2 - Super Modern Browsers
+ * woff - Pretty Modern Browsers
+ * ttf - Safari, Android, iOS
+ */
+
+@mixin font-HelveticaNow() {
+  @font-face {
+    font-style: normal;
+    font-weight: 400;
+    font-family: "HelveticaNowDisplay";
+    src: url("assets/fonts/HelveticaNow/HelveticaNowDisplay.woff2") format("woff2"),
+         url("assets/fonts/HelveticaNow/HelveticaNowDisplay.woff") format("woff"),
+         url("assets/fonts/HelveticaNow/HelveticaNowDisplay.ttf") format("truetype");
+  }
+  
+  @font-face {
+    font-style: normal;
+    font-weight: 700;
+    font-family: "HelveticaNowDisplay";
+    src: url("assets/fonts/HelveticaNow/HelveticaNowDisplayBold.woff2") format("woff2"),
+         url("assets/fonts/HelveticaNow/HelveticaNowDisplayBold.woff") format("woff"),
+         url("assets/fonts/HelveticaNow/HelveticaNowDisplayBold.ttf") format("truetype");
+  }
+  
+  @font-face {
+    font-style: normal;
+    font-weight: 400;
+    font-family: "HelveticaNowText";
+    src: url("assets/fonts/HelveticaNow/HelveticaNowText.woff2") format("woff2"),
+         url("assets/fonts/HelveticaNow/HelveticaNowText.woff") format("woff"),
+         url("assets/fonts/HelveticaNow/HelveticaNowText.ttf") format("truetype");
+  }
+  
+  @font-face {
+    font-style: normal;
+    font-weight: 700;
+    font-family: "HelveticaNowText";
+    src: url("assets/fonts/HelveticaNow/HelveticaNowTextBold.woff2") format("woff2"),
+         url("assets/fonts/HelveticaNow/HelveticaNowTextBold.woff") format("woff"),
+         url("assets/fonts/HelveticaNow/HelveticaNowTextBold.ttf") format("truetype");
+  }
+  
+  @font-face {
+    font-style: italic;
+    font-weight: 400;
+    font-family: "HelveticaNowText";
+    src: url("assets/fonts/HelveticaNow/HelveticaNowTextIt.woff2") format("woff2"),
+         url("assets/fonts/HelveticaNow/HelveticaNowTextIt.woff") format("woff"),
+         url("assets/fonts/HelveticaNow/HelveticaNowTextIt.ttf") format("truetype");
+  }
+}

package/dist/styles-scss/_ui.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:map";
 @use "colors";
 
 @mixin def($var, $value) {
@@ -55,6 +56,39 @@
   @return calc((var(--height) - var(--offset-safezone) * 2) * #{$multiplier});
 }
 
+$cfxui-color-luminance: (
+  'pure',
+  950,
+  900,
+  800,
+  700,
+  600,
+  500,
+  400,
+  300,
+  200,
+  100,
+  50,
+);
+
+$cfxui-color-alpha: (
+  '100': 1,
+  '90': 0.9,
+  '80': 0.8,
+  '70': 0.7,
+  '60': 0.6,
+  '50': 0.5,
+  '40': 0.4,
+  '30': 0.3,
+  '20': 0.2,
+  '10': 0.1,
+);
+
+@mixin define-font-size($name, $size, $line-height: 1.3) {
+  @include def('font-size-#{$name}', $size);
+  @include def('line-height-#{$name}', $line-height);
+}
+
 @mixin define-color($name, $color, $bg, $fg) {
   .cfx-color-#{$name} { color: $color }
 
@@ -71,6 +105,7 @@
   --color-#{$name}-900: #{colors.color-triplet(colors.lab-gradient-step($color, $fg, 4, 7))};
   --color-#{$name}-950: #{colors.color-triplet(colors.lab-gradient-step($color, $fg, 5, 7))};
 }
+
 @mixin define-main-color($bg, $fg) {
   --color-main: #{colors.color-triplet($bg)};
   --color-main-50:  #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 1,  12))};
@@ -85,6 +120,7 @@
   --color-main-900: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 10, 12))};
   --color-main-950: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 11, 12))};
 }
+
 @mixin define-main-colors($bg, $fg, $overrides: ()) {
   $colors: map-merge((
     'primary': #f50551,
@@ -102,6 +138,31 @@
     @include define-color($colorName, $colorValue, $bg, $fg);
   }
 }
+
+@mixin define-theme($bg, $fg, $overrides: ()) {
+  $colors: map-merge((
+    'accent': #F40552,
+    'primary': #F1F1E4,
+    'secondary': #9EA4BD,
+    'tertiary': #FF75AC,
+    'green': #22BF4E,
+    'yellow': #FDA640,
+    'red': #E33131,
+    'argentum': #A3A3A3,
+    'aurum': #BFA45E,
+    'platinum': #F1F1F1,
+    'bg': #11131C,
+    'bg-light': #1C202E,
+    'bg-dark': #1C202E,
+    'bg-dark-grey': #1A1A1A,
+    'bg-black': #000000,
+  ), $overrides);
+
+  @each $colorName, $colorValue in $colors {
+    @include define-color($colorName, $colorValue, $bg, $fg);
+  }
+}
+
 @mixin define-color-token($name, $color) {
   --color-#{$name}: #{$color};
 }
@@ -127,15 +188,19 @@
   color: color-token($colorToken);
 }
 
+@mixin letter-spacing($size: 'normal') {
+  letter-spacing: var(--letter-spacing-#{$size});
+}
+
+@mixin line-height($size: 'normal') {
+  line-height: var(--line-height-#{$size});
+}
+
 @mixin animated($props: 'all', $subClass: '&') {
   #{$subClass} {
-    transition: #{$props} .2s ease;
-  }
-
-  &:hover {
-    #{$subClass} {
-      transition: none;
-    }
+    transition: #{$props} .2s ease,
+      outline-offset 0s,
+      outline 0s;
   }
 }
 
@@ -172,10 +237,16 @@
 
 @mixin offset-classes($prefix: 'offset', $property: 'gap') {
   &.#{$prefix}-none {
-    #{$property}: 0;
+    #{$property}: offset('none');
+  }
+  &.#{$prefix}-hairthin {
+    #{$property}: offset('hairthin');
   }
   &.#{$prefix}-thin {
-    #{$property}: 2px;
+    #{$property}: offset('thin');
+  }
+  &.#{$prefix}-xxsmall {
+    #{$property}: offset('xxsmall');
   }
   &.#{$prefix}-xsmall {
     #{$property}: offset('xsmall');
@@ -192,4 +263,50 @@
   &.#{$prefix}-xlarge {
     #{$property}: offset('xlarge');
   }
+  &.#{$prefix}-safezone {
+    #{$property}: offset('safezone');
+  }
+}
+
+@mixin webkit-scrollbar() {
+  ::-webkit-scrollbar {
+    width: use('scrollable-thumb-size');
+  }
+  ::-webkit-scrollbar-thumb {
+    @include border-radius('pill');
+  
+    background-color: color-token('scrollbar');
+  
+    &:hover {
+      background-color: color-token('scrollbar-hover');
+    }
+    &:active {
+      background-color: color-token('scrollbar-active');
+    }
+  }
+}
+
+@mixin placeholder-color($color) {
+  &::placeholder               {color: $color}
+  &::-webkit-input-placeholder {color: $color}
+  &::-moz-placeholder          {color: $color}
+  &:-ms-input-placeholder      {color: $color}
+}
+
+@mixin placeholder-animated($props: 'all', $subClass: '&') {
+  &::placeholder               {@include animated($props, $subClass)}
+  &::-webkit-input-placeholder {@include animated($props, $subClass)}
+  &::-moz-placeholder          {@include animated($props, $subClass)}
+  &:-ms-input-placeholder      {@include animated($props, $subClass)}
+}
+
+$zindexMap: (
+  'zero': 0,
+  'first': 1,
+  'second': 2,
+  'max': 9000,
+);
+
+@function zindex($index) {
+  @return map.get($zindexMap, $index);
 }

package/dist/styles-scss/global.scss

@@ -1,58 +1,112 @@
+@import "typography";
 @import "tokens";
-@import "~@fontsource/montserrat/variable.css";
-@import "~@fontsource/montserrat/variable-italic.css";
-@import "~@fontsource/rubik/variable.css";
-@import "~@fontsource/rubik/variable-italic.css";
 
 body {
+  // initiat tokens
   @include color-tokens;
+  @include offset-tokens;
+  @include control-height-tokens;
+  @include text-tokens;
+  @include border-radius-tokens;
+  @include switch-tokens;
+  @include input-dropzone-tokens;
+  @include checkbox-tokens;
+  @include input-tokens;
+  @include select-tokens;
+  @include icon-tokens;
+  @include info-panel-tokens;
+  @include tabular-tokens;
+  @include modal-tokens;
+  @include scrollable-tokens;
+  @include avatar-tokens;
+  @include title-tokens;
+  @include button-tokens;
+  @include badge-tokens;
+  @include accordion-tokens;
 
-  @include ui.def('control-height-xxsmall', ui.q(1.5));
-  @include ui.def('control-height-xsmall', ui.q(3));
-  @include ui.def('control-height-small', ui.q(4));
-  @include ui.def('control-height-normal', ui.q(6));
-  @include ui.def('control-height-large', ui.q(7));
+  // initiat fonts
+  @include font-HelveticaNow;
 
-  @include ui.def('offset-none', 0px);
-  @include ui.def('offset-hairthin', 1px);
-  @include ui.def('offset-thin', 2px);
-  @include ui.def('offset-xsmall', ui.q(.5));
-  @include ui.def('offset-small', ui.q(1));
-  @include ui.def('offset-normal', ui.q(2));
-  @include ui.def('offset-large', ui.q(4));
-  @include ui.def('offset-xlarge', ui.q(6));
+  // Set default font styles
+  @include ui.font-color('text');
+  @include ui.font-family('primary');
+  @include ui.font-weight('normal');
+  @include ui.line-height('normal');
+  @include ui.letter-spacing('normal');
+}
 
-  @include ui.def('offset-safezone', ui.q(8));
+a {
+  display: inline-flex;
+  color: ui.color('tertiary');
 
-	@include ui.def('font-size-xsmall', 0.7rem);
-	@include ui.def('font-size-small', 0.8rem);
-	@include ui.def('font-size-normal', 1rem);
-	@include ui.def('font-size-large', 1.25rem);
-	@include ui.def('font-size-xlarge', 1.5rem);
-	@include ui.def('font-size-xxlarge', 1.75rem);
-	@include ui.def('font-size-xxxlarge', 2rem);
+  text-decoration: underline;
+  text-decoration-color: currentColor;
 
-  @include ui.def('font-weight-thin', 100);
-  @include ui.def('font-weight-normal', 300);
-  @include ui.def('font-weight-bold', 400);
-  @include ui.def('font-weight-bolder', 600);
-  @include ui.def('font-weight-boldest', 900);
+  cursor: pointer;
 
-  @include ui.def('font-family-primary', 'RubikVariable');
-  @include ui.def('font-family-secondary', 'MontserratVariable');
-  @include ui.def('font-family-monospace', 'Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace');
+  @include ui.animated();
 
-  @include ui.def('border-radius-none', 0);
-  @include ui.def('border-radius-xxsmall', ui.q(.25));
-  @include ui.def('border-radius-xsmall', ui.q(.5));
-  @include ui.def('border-radius-small', ui.q(.75));
-  @include ui.def('border-radius-normal', ui.q(1.5));
+  &.unstyle {
+    text-decoration: none;
+  }
 
-  @include ui.font-color('text');
-  @include ui.font-family('primary');
+  &:hover {
+    text-decoration-color: ui.color('tertiary', $alpha: .5);
+  }
+}
+
+// Default headers styles
+h1, h2, h3, h4, h5, h6 {
+  @include ui.font-family('secondary');
+}
+
+h1 {
+  @include ui.font-size('xxxlarge');
+  @include ui.line-height('xxxlarge');
+  @include ui.font-weight('bold');
+}
+h2 {
+  @include ui.font-size('xxlarge');
+  @include ui.line-height('xxlarge');
+  @include ui.font-weight('bold');
+}
+h3 {
+  @include ui.font-size('xlarge');
+  @include ui.line-height('xlarge');
+  @include ui.font-weight('bold');
+}
+h4 {
+  @include ui.font-size('large');
+  @include ui.line-height('large');
+  @include ui.font-weight('bold');
+}
+h5 {
+  @include ui.font-size('medium');
+  @include ui.line-height('medium');
+  @include ui.font-weight('bold');
+}
+h6 {
+  @include ui.font-size('medium');
+  @include ui.line-height('medium');
   @include ui.font-weight('normal');
 }
 
+kbd {
+  font-weight: 300;
+  padding: 2px ui.q(.5);
+  background-color: ui.color-token('kbd-background');
+  border-radius: 2px;
+  border: solid 1px ui.color-token('kbd-border');
+}
+
+p {
+  margin: ui.offset('small') 0;
+}
+
+li::marker {
+  color: ui.color-token('li-marker');
+}
+
 // Utilities
 .util-full-height {
   height: 100%;
@@ -61,7 +115,7 @@ body {
   width: 100%;
 }
 .util-z-index-9000 {
-  z-index: 9000;
+  z-index: ui.zindex('max');
 }
 .util-text-selectable,
 .util-text-selectable * {