@plangrid/structure/structure.js

CSS structure library

const cader = require("cader");
const structure = new cader;

// LF = light frame
// HF = heavy frame

structure.save({
  "FontXL": "font-os font-xl",
  "FontL": "font-os font-l",
  "FontM": "font-os font-m",
  "FontS": "font-os font-s",
  "FontXS": "font-os font-xs",
  "FontXXS": "font-os font-xxs",
  "FontB": "font-os font-b",
  "FontC": "font-os font-c",
}).save({
  "FlatControl": "shadow-ring",
  "RaiseControl": "shadow-raised shadow-ring",
  "RaiseStatic": "shadow-raised",
  "ShelfMeld": "sharp-shelf meld-shelf",
  "ShelfWeld": "sharp-shelf weld-shelf",
  "StackMeld": "sharp-stack meld-stack",
  "StackWeld": "sharp-stack weld-stack",
  "TruncateDIY": "overflow-hidden overflow-dots ws-nowrap",
  "TruncateBox": "overflow-hidden overflow-dots ws-nowrap preset-box",
  "PaneX": "preset-box oy-hidden ox-auto",
  "PaneY": "preset-box ox-hidden oy-auto",
}).save({
  "Cbox": "font-os preset-button cbox",
  "Rdio": "font-os preset-button rdio",
  "InputLF": "font-os preset-input round-medium border",
  "UnderNone": "underline-none",
  "UnderSome": "underline-none underline-hover",
  "UnderAll": "underline",
  "OptionLF": structure.bond("TruncateBox font-os block"),
  "TapLF": "font-os preset-button",
  "TapHF": "font-os preset-button pointer",
  "TextareaLF": "font-os preset-textarea round-medium border",
  "Field": "font-os preset-box border-none",
  "Tactile": "font-os preset-box block-table",
  "AnimSpin": "keyframes-spin keyspeeds-spin anim-initial anim-fill anim-infinite",
}).save({
  "Ask": structure.bond("FontB preset-box block-table"),
  "InputHF": structure.bond("InputLF frame-basic"),
  "TextareaHF": structure.bond("TextareaLF frame-basic"),
  "OpdownWIP": structure.bond("PaneY round-medium RaiseControl"),
  "OptionHF": structure.bond("OptionLF p1 font-b"),
  "Opdown": "@reserved",
  "OpdownLF": "@reserved",
  "OpdownHF": "@reserved",
  "Opout": "@reserved",
  "OpoutLF": "@reserved",
  "OpoutHF": "@reserved",
}).save({
  "PutLF": structure.bond("InputLF ShelfWeld"),
  "PutHF": structure.bond("InputHF ShelfWeld"),
  "CapLF": "@reserved",
  "CapHF": "@reserved",
  "LidLF": "@reserved",
  "LidHF": "@reserved",
  "Checkbox": structure.bond("Cbox RaiseControl tone-check"),
  "Radio": structure.bond("Rdio RaiseControl tone-check"),
}).save({
  // Short-term aliases for compat. Favor the more specific names.
  "Input": structure.bond("@deprecated InputHF RaiseControl"),
  "Tap": structure.bond("@deprecated TapLF"),
  "Textarea": structure.bond("@deprecated TextareaHF RaiseControl"),
}).save(
  [
    "secondary",
    "primary",
    "additive",
    "destructive",
  ].reduce(function(memo, tone) {
    memo["Button:" + tone] = structure.bond("Tap pt1 pr2 pb1 pl2 RaiseControl round-medium border tone-" + tone);
    return memo;
  }, {})
).save({
  // Alias these until usage is fully mitigated
  "Secondary": structure.fuse("Button:secondary"),
  "Primary": structure.fuse("Button:primary"),
  "Additive": structure.fuse("Button:additive"),
  "Destructive": structure.fuse("Button:destructive"),
}).save(
  [
    "link",
    "icon",
  ].reduce(function(memo, tone) {
    memo["Button:" + tone] = structure.bond("Tap pt1 pr2 pb1 pl2 FlatControl round-medium border tone-" + tone);
    return memo;
  }, {})
).save(
  [
    "validate",
    "validity",
    "valid",
    "invalid",
  ].reduce(function(memo, tone) {
    memo["Input:" + tone] = structure.bond("Input tone-" + tone);
    memo["Textarea:" + tone] = structure.bond("Textarea tone-" + tone);
    return memo;
  }, {})
);

module.exports = structure.freeze();