@crowdstrike/tailwind-toucan-base 3.0.1

package/README.md

@@ -0,0 +1,78 @@
+# @crowdstrike/tailwind-toucan-base
+
+A Tailwind preset that provides the base styles for CrowdStrike's Toucan design system.
+
+## Usage
+
+```bash
+yarn add @crowdstrike/tailwind-toucan-base
+#
+npm install @crowdstrike/tailwind-toucan-base
+#
+pnpm add @crowdstrike/tailwind-toucan-base
+```
+
+### Tailwind
+
+_Note_: This preset is presently only tested with Tailwind v2
+
+```js
+// tailwind.config.js
+
+module.exports = {
+  presets: [require('@crowdstrike/tailwind-toucan-base')],
+  extends: {
+    // your customizations here
+  }
+};
+```
+
+### CSS `@import`
+
+If your packager supports importing styles directly from an npm package, the Toucan styles are pre-built and can be imported at:
+
+```css
+@import "@crowdstrike/tailwind-toucan-base";
+```
+
+### CDN Usage
+
+Many JS CDNs scrape NPM and automatically serve and cache assets
+deployed to NPM.
+
+Here as an example with JSDelivr
+```
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@crowdstrike/tailwind-toucan-base/toucan.css">
+```
+
+## Previewing the config locally
+
+```bash
+pnpm start
+```
+which is an alias for:
+
+```bash
+pnpm run build:preview
+npx http-server ./dist
+```
+
+## Importing colors and shadows from Figma
+
+This addon provides the ability to pull our palette information directly from Figma files and store them in
+`themes.json` which is used by the Tailwind configuration to set up our CSS.
+
+To import the colors run:
+
+```bash
+LIGHT_ID=fileId DARK_ID=fileId MEZZANINE_ID=fileId \
+  FIGMA_TOKEN=some-key pnpm run figma:export-styles
+```
+
+- `FIGMA_TOKEN` here is figma [Personal Access Token](https://www.figma.com/developers/api#access-tokens).
+- `LIGHT_ID`, `DARK_ID`, and `MEZZANINE_ID` are `fileId`s that can be obtained from the URL of the figma project containing the color tokens.
+
+...and commit the changes to `themes.json`.
+
+If you see any errors reported then you _may_ need to ensure that the Figma file is set up correctly (and e.g.
+there are corresponding colors across each of the palettes).

package/index.js

@@ -0,0 +1,390 @@
+'use strict';
+
+const themesData = require('./themes');
+
+let colors = themesData.themes['dark'].colors.reduce((acc, { name }) => {
+  acc[name.replace('\\.', '.')] = `var(--${name})`;
+
+  return acc;
+}, {});
+
+let boxShadow = themesData.themes['dark'].shadows.reduce((acc, { name }) => {
+  acc[name.replace(/^elevation-/, '')] = `var(--${name})`;
+
+  return acc;
+}, {});
+
+const FONT_SIZES = {
+  xxs: '.5625rem',
+  xs: '.75rem',
+  sm: '.875rem',
+  md: '1rem',
+  lg: '1.25rem',
+  xl: '1.5rem',
+  '2xl': '2rem',
+  '3xl': '2.5rem',
+  '4xl': '3rem',
+};
+
+module.exports = {
+  theme: {
+    // Keys placed here will REMOVE the classes included with tailwindcss
+    // eg if `padding` was added here we would lose all of tailwinds padding classes.
+    // If you want to ADD a custom class then place them in the `extend` object below
+    boxShadow: {
+      none: 'none',
+      'focusable-outline': 'inset 0 0 0 1px var(--lines-dark), var(--elevation-inner-md)',
+      'focus-outline': 'inset 0 0 0 2px var(--focus)',
+      'error-outline': 'inset 0 0 0 2px var(--critical)',
+      'search-input': 'inset 0 0 0 1px var(--nav-text-secondary)',
+      ...boxShadow,
+    },
+
+    colors: {
+      current: 'currentColor',
+      transparent: 'transparent',
+      falcon: 'var(--falcon)',
+      ...colors,
+    },
+
+    fontFamily: {
+      sans: ['Calibre', 'sans-serif'],
+      mono: ['Monaco', 'monospace'],
+    },
+
+    fontSize: (theme) => {
+      return {
+        xxs: [FONT_SIZES.xxs, theme('lineHeight.4')],
+        xs: [FONT_SIZES.xs, theme('lineHeight.5')],
+        sm: [FONT_SIZES.sm, theme('lineHeight.6')],
+        md: [FONT_SIZES.md, theme('lineHeight.6')],
+        lg: [FONT_SIZES.lg, theme('lineHeight.8')],
+        xl: [FONT_SIZES.xl, theme('lineHeight.8')],
+        '2xl': [FONT_SIZES['2xl'], theme('lineHeight.10')],
+        '3xl': [FONT_SIZES['3xl'], theme('lineHeight.12')],
+        '4xl': [FONT_SIZES['4xl'], theme('lineHeight.13')],
+      };
+    },
+
+    zIndex: {
+      '-1': '-1',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      'flash-messages': 'var(--z-index-flash-messages)',
+      overlay: 'var(--z-index-overlay)',
+      tooltip: 'var(--z-index-tooltip)',
+      'popover-sticky': 'var(--z-index-popover-sticky)',
+      popover: 'var(--z-index-popover)',
+      'skip-to-content': 'var(--z-index-skip-to-content)',
+      tablist: 'var(--z-index-tablist)',
+      tabpanel: 'var(--z-index-tabpanel)',
+      'tabpanel-scrim': 'var(--z-index-tabpanel-scrim)',
+      'template-head': 'var(--z-index-template-head)',
+      'template-main-head-sticky': 'var(--z-index-template-main-head-sticky)',
+      'template-main-head': 'var(--z-index-template-main-head)',
+      'template-main': 'var(--z-index-template-main)',
+      'search-results-navigation': 'var(--z-index-navigation-search)',
+    },
+
+    extend: {
+      animation: {
+        'fade-in': 'fade-in .25s linear',
+      },
+
+      cursor: {
+        'col-resize': 'col-resize',
+      },
+
+      flex: {
+        2: '2 2 0%',
+        3: '3 3 0%',
+        4: '4 4 0%',
+      },
+
+      gridTemplateColumns: {
+        'centered-2/3': '2fr 8fr 2fr',
+
+        'auto-2': 'auto auto',
+
+        'max-content-4': 'repeat(4, minmax(max-content, 1fr))',
+        'max-content-6': 'repeat(6, minmax(max-content, 1fr))',
+      },
+
+      height: {
+        2.5: '0.375rem',
+        7: '1.75rem',
+        9: '2.25rem',
+        11: '2.75rem',
+        'main-content-area': 'calc(100vh - var(--template-head-height))',
+      },
+
+      keyframes: {
+        'fade-in': {
+          '0%': { opacity: '0%' },
+          '100%': { opacity: '100%' },
+        },
+      },
+
+      rotate: {
+        '-5': '-5deg',
+      },
+
+      inset: {
+        '1/2': '50%',
+      },
+
+      lineHeight: {
+        12: '3rem',
+        13: '3.25rem',
+      },
+
+      maxHeight: {
+        listbox: '12em',
+        'under-header': 'calc(100vh - var(--template-head-height))',
+      },
+
+      maxWidth: {
+        paragraph: '34rem',
+      },
+
+      minHeight: (theme) => {
+        return {
+          3: theme('height.3'),
+          4: theme('height.4'),
+          6: theme('height.6'),
+          16: theme('height.16'),
+        };
+      },
+
+      minWidth: (theme) => {
+        return {
+          3: theme('width.3'),
+          4: theme('width.4'),
+          6: theme('width.6'),
+          16: theme('width.16'),
+          24: theme('width.24'),
+          48: theme('width.48'),
+          phoenix: '1024px',
+          popover: '140px',
+          toucan: '1380px',
+        };
+      },
+
+      padding: {
+        0.25: '0.063rem',
+        'property-tabs-top': 'var(--property-tabs-top)',
+        unset: 'unset',
+      },
+
+      spacing: {
+        0.5: '0.125rem',
+      },
+
+      transitionProperty: {
+        width: 'width',
+      },
+
+      width: {
+        2.5: '0.375rem',
+        'max-content': 'max-content',
+        7: '1.75rem',
+        15: '3.75rem',
+      },
+    },
+
+    screens: {
+      print: { raw: 'print' },
+
+      // Defaults omitted to reduce payload size,
+      // sm: md: lg: variants removed to reduce file size by ~700kb
+      // https://tailwindcss.com/docs/theme/#screens
+      //
+      // Now, we add the screens we only need for specific properties
+      lg: '1120px',
+      '2xl': '1536px',
+    },
+  },
+
+  variants: {
+    // defaults
+    // https://tailwindcss.com/docs/pseudo-class-variants/#default-variants-reference
+    // **** NOTE *****
+    // Order of variants passed here controls order in source code. You almost certainly
+    // want active and disabled at the end so they can override other styles!
+    accessibility: ['focus'],
+    alignContent: [],
+    alignItems: [],
+    alignSelf: [],
+    animation: [],
+    appearance: [],
+    backdropBlur: [],
+    backdropBrightness: [],
+    backdropContrast: [],
+    backdropDropShadow: [],
+    backdropFilter: [],
+    backdropGrayscale: [],
+    backdropHueRotate: [],
+    backdropInvert: [],
+    backdropSaturate: [],
+    backdropSepia: [],
+    backgroundAttachment: [],
+    backgroundBlendMode: [],
+    backgroundClip: [],
+    backgroundColor: [
+      'even',
+      'group-hover',
+      'hover',
+      'focus',
+      'focus-within',
+      'focus-visible',
+      'active',
+      'disabled',
+    ],
+    backgroundImage: [],
+    backgroundOpacity: ['hover', 'focus'],
+    backgroundPosition: [],
+    backgroundRepeat: [],
+    backgroundSize: [],
+    blur: [],
+    borderCollapse: [],
+    borderColor: ['hover', 'active'],
+    borderOpacity: ['hover', 'focus'],
+    borderRadius: ['focus', 'first', 'last'],
+    borderStyle: [],
+    borderWidth: ['first', 'last', 'active'],
+    boxDecorationBreak: [],
+    boxShadow: [
+      'hover',
+      'group-hover',
+      'focus',
+      'focus-within',
+      'focus-visible',
+      'active',
+      'disabled',
+    ],
+    boxSizing: [],
+    brightness: [],
+    clear: [],
+    container: [],
+    contrast: [],
+    cursor: ['disabled'],
+    display: ['responsive', 'group-hover'],
+    divideColor: [],
+    divideOpacity: [],
+    divideStyle: [],
+    divideWidth: [],
+    dropShadow: [],
+    fill: [],
+    filter: [],
+    flex: [],
+    flexDirection: [],
+    flexGrow: [],
+    flexShrink: [],
+    flexWrap: [],
+    float: [],
+    fontFamily: [],
+    fontSize: [],
+    fontSmoothing: [],
+    fontStyle: [],
+    fontVariantNumeric: [],
+    fontWeight: ['hover', 'focus'],
+    gap: [],
+    gradientColorStops: ['dark', 'hover', 'focus'],
+    grayscale: [],
+    gridAutoColumns: [],
+    gridAutoFlow: [],
+    gridAutoRows: [],
+    gridColumn: [],
+    gridColumnEnd: [],
+    gridColumnStart: [],
+    gridRow: [],
+    gridRowEnd: [],
+    gridRowStart: [],
+    gridTemplateColumns: ['responsive'],
+    gridTemplateRows: [],
+    height: [],
+    hueRotate: [],
+    inset: ['focus'],
+    invert: [],
+    isolation: [],
+    justifyContent: [],
+    justifyItems: [],
+    justifySelf: [],
+    letterSpacing: [],
+    lineHeight: [],
+    listStylePosition: [],
+    listStyleType: [],
+    margin: ['first', 'last'],
+    maxHeight: [],
+    maxWidth: [],
+    minHeight: [],
+    minWidth: [],
+    mixBlendMode: [],
+    objectFit: [],
+    objectPosition: [],
+    opacity: ['hover', 'focus', 'group-hover', 'group-focus'],
+    order: [],
+    outline: ['focus'],
+    overflow: [],
+    overscrollBehavior: [],
+    padding: [],
+    placeItems: [],
+    placeContent: [],
+    placeSelf: [],
+    placeholderColor: ['focus'],
+    placeholderOpacity: ['focus'],
+    pointerEvents: ['disabled'],
+    position: ['hover'],
+    resize: [],
+    ringColor: ['dark', 'focus-within', 'focus'],
+    ringOffsetColor: ['dark', 'focus-within', 'focus'],
+    ringOffsetWidth: ['focus-within', 'focus'],
+    ringOpacity: ['dark', 'focus-within', 'focus'],
+    ringWidth: ['focus-within', 'focus-visible', 'focus'],
+    rotate: ['active'],
+    saturate: [],
+    scale: ['hover', 'focus', 'active'],
+    sepia: [],
+    skew: ['hover', 'focus'],
+    space: [],
+    stroke: [],
+    strokeWidth: [],
+    tableLayout: [],
+    textAlign: [],
+    textColor: ['hover', 'focus', 'focus-visible', 'group-hover', 'active', 'disabled'],
+    textDecoration: ['hover', 'focus'],
+    textOpacity: ['hover', 'focus'],
+    textOverflow: [],
+    textTransform: [],
+    transform: [],
+    transformOrigin: [],
+    transitionDelay: [],
+    transitionDuration: [],
+    transitionProperty: ['active'],
+    transitionTimingFunction: [],
+    translate: ['hover', 'focus'],
+    userSelect: [],
+    verticalAlign: [],
+    visibility: [],
+    whitespace: [],
+    width: [],
+    wordBreak: [],
+    zIndex: ['hover', 'active', 'group-hover'],
+  },
+
+  plugins: [
+    /**
+     * All of our own custom plugins are wrapped up this single
+     * configure call -- form fields, variables, etc
+     */
+    ...require('./plugins').configure({ FONT_SIZES, themesData }),
+  ],
+};

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@crowdstrike/tailwind-toucan-base",
+  "version": "3.0.1",
+  "private": false,
+  "description": "Tailwind preset for CrowdStrike's Toucan design system",
+  "repository": "https://github.com/CrowdStrike/tailwind-toucan-base",
+  "license": "MIT",
+  "author": "CrowdStrike UX Team",
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "index.css",
+    "toucan.css",
+    "plugins/**/*.js"
+  ],
+  "scripts": {
+    "start": "pnpm run build && npx http-server ./dist",
+    "build": "npm-run-all clean build:cdn build:alias build:preview",
+    "build:preview": "node ./lib/build-preview.mjs",
+    "build:cdn": "NODE_ENV=production tailwind build -i ./lib/index.css -o ./index.css -c ./lib/tailwind.config.cdn.js",
+    "clean": "rm -f ./toucan.css ./index.css",
+    "build:alias": "cp index.css toucan.css",
+    "figma:export-styles": "figma-export use-config",
+    "test": "pnpm exec vitest --coverage --run",
+    "lint:fix": "pnpm run lint:js --fix",
+    "lint:js": "eslint ."
+  },
+  "dependencies": {
+    "@figma-export/cli": "3.3.1",
+    "tailwindcss": "^2.2.15"
+  },
+  "devDependencies": {
+    "@nullvoxpopuli/eslint-configs": "2.2.16",
+    "@semantic-release/changelog": "^5.0.1",
+    "@semantic-release/git": "^9.0.1",
+    "@types/fs-extra": "^9.0.13",
+    "autoprefixer": "^10.3.4",
+    "c8": "^7.11.2",
+    "common-tags": "^1.8.2",
+    "eslint": "^7.32.0",
+    "execa": "^6.1.0",
+    "fs-extra": "^10.1.0",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.3.6",
+    "semantic-release": "^17.4.7",
+    "tailwind-config-viewer": "^1.7.0",
+    "typescript": "^4.6.4",
+    "vitest": "0.12.4"
+  },
+  "engines": {
+    "node": ">=14.15.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "release": {
+    "branches": [
+      "main",
+      "master"
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/changelog",
+      "@semantic-release/npm",
+      "@semantic-release/github",
+      "@semantic-release/git"
+    ]
+  },
+  "packageManager": "pnpm@7.1.0",
+  "volta": {
+    "node": "16.15.0",
+    "yarn": "1.22.11",
+    "npm": "8.9.0"
+  }
+}

package/plugins/form-fields.js

@@ -0,0 +1,46 @@
+'use strict';
+
+const plugin = require('tailwindcss/plugin');
+
+module.exports = () =>
+  plugin((pluginApi) => {
+    addFormFieldStyles(pluginApi);
+  });
+
+function addFormFieldStyles({ addComponents }) {
+  let textbox = {
+    backgroundColor: 'var(--overlay-1)',
+    borderRadius: 'var(--border-radius)',
+    boxShadow: 'inset 0 0 0 1px var(--lines-dark), var(--elevation-inner-md)',
+    color: 'var(--titles-and-attributes)',
+    display: 'block',
+    fontFamily: 'inherit',
+    fontSize: '1rem',
+    lineHeight: '1.5',
+    padding: 'var(--space-1) var(--space-2)',
+    width: '100%',
+
+    '&:focus': {
+      // TODO: share with definition of boxShadow: shadow-focus-outline
+      boxShadow: 'inset 0 0 0 2px var(--focus);',
+      outline: 0,
+    },
+
+    '&::placeholder': {
+      color: 'var(--disabled)',
+    },
+  };
+
+  let textarea = {
+    ...textbox,
+    minHeight: '150px',
+    resize: 'vertical',
+  };
+
+  let formFields = {
+    '.textbox': textbox,
+    '.textarea': textarea,
+  };
+
+  addComponents(formFields);
+}

package/plugins/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = {
+  configure: ({ FONT_SIZES, themesData }) => [
+    require('./interaction')(),
+    require('./form-fields')(),
+    require('./line-clamp'),
+    require('./typography')(FONT_SIZES),
+    require('./theme-plugin')(themesData),
+    require('./variables'),
+  ],
+};

package/plugins/interaction.js

@@ -0,0 +1,157 @@
+'use strict';
+
+const plugin = require('tailwindcss/plugin');
+
+module.exports = () =>
+  plugin((pluginApi) => {
+    addFocusStyles(pluginApi);
+    addInteractiveStyles(pluginApi);
+  });
+
+function addFocusStyles({ addComponents }) {
+  addComponents({
+    '.focusable': {
+      '@apply ring-ground-floor': {},
+      '@apply ring-inset': {},
+      '@apply ring-offset-2': {},
+      '@apply ring-offset-focus': {},
+    },
+
+    '.focusable:focus': {
+      '@apply outline-none': {},
+    },
+
+    '.focusable:focus-visible': {
+      '@apply ring-2': {},
+    },
+
+    '.focusable-destructive': {
+      '@apply ring-offset-destructive-pressed': {},
+    },
+
+    '.focusable-outer': {
+      '@apply ring-offset-ground-floor': {},
+      '@apply ring-offset-1': {},
+      '@apply ring-focus': {},
+    },
+
+    '.focusable-outer:focus': {
+      '@apply outline-none': {},
+    },
+
+    '.focusable-outer:focus-visible': {
+      '@apply ring-2': {},
+    },
+  });
+}
+
+function addInteractiveStyles({ addComponents }) {
+  addComponents({
+    '.interactive-normal': {
+      '@apply bg-normal-idle': {},
+      '@apply shadow-base': {},
+      '@apply text-text-and-icons': {},
+    },
+
+    '.interactive-normal:not(.interactive-disabled):hover': {
+      '@apply bg-normal-hover': {},
+      '@apply shadow-md': {},
+    },
+
+    '.interactive-normal:not(.interactive-disabled):focus-visible': {
+      '@apply bg-normal-hover': {},
+    },
+
+    '.interactive-normal:not(.interactive-disabled):active': {
+      '@apply bg-normal-pressed': {},
+      '@apply shadow-inner-md': {},
+    },
+
+    '.interactive-primary': {
+      '@apply bg-primary-idle': {},
+      '@apply shadow-base': {},
+      '@apply text-ground-floor': {},
+    },
+
+    '.interactive-primary:not(.interactive-disabled):focus-visible': {
+      '@apply bg-primary-hover': {},
+    },
+
+    '.interactive-primary:not(.interactive-disabled):hover': {
+      '@apply bg-primary-hover': {},
+      '@apply shadow-md': {},
+    },
+
+    '.interactive-primary:not(.interactive-disabled):active': {
+      '@apply bg-primary-pressed': {},
+      '@apply shadow-inner-md': {},
+    },
+
+    '.interactive-destructive': {
+      '@apply bg-destructive-idle': {},
+      '@apply shadow-base': {},
+      '@apply text-destructive-pressed': {},
+    },
+
+    '.interactive-destructive:not(.interactive-disabled):focus-visible': {
+      '@apply bg-destructive-hover': {},
+      '@apply text-ground-floor': {},
+    },
+
+    '.interactive-destructive:not(.interactive-disabled):hover': {
+      '@apply shadow-md': {},
+      '@apply bg-destructive-hover': {},
+      '@apply text-ground-floor': {},
+    },
+
+    '.interactive-destructive:not(.interactive-disabled):active': {
+      '@apply bg-destructive-pressed': {},
+      '@apply text-ground-floor': {},
+      '@apply shadow-inner-md': {},
+    },
+
+    '.interactive-link': {
+      '@apply bg-transparent': {},
+      '@apply text-primary-idle': {},
+    },
+
+    '.interactive-link:not(.interactive-disabled):hover': {
+      '@apply bg-opacity-0': {},
+      '@apply text-primary-hover': {},
+    },
+
+    '.interactive-link:not(.interactive-disabled):active': {
+      '@apply text-primary-pressed': {},
+    },
+
+    '.interactive-quiet': {
+      '@apply bg-transparent': {},
+      '@apply text-text-and-icons': {},
+    },
+
+    '.interactive-quiet:not(.interactive-disabled):focus-visible': {
+      '@apply bg-normal-hover': {},
+    },
+
+    '.interactive-quiet:not(.interactive-disabled):hover': {
+      '@apply bg-normal-hover': {},
+      '@apply shadow-md': {},
+    },
+
+    '.interactive-quiet:not(.interactive-disabled):active': {
+      '@apply bg-normal-pressed': {},
+      '@apply shadow-inner-md': {},
+    },
+
+    '.interactive-disabled': {
+      '@apply bg-overlay-1': {},
+      '@apply cursor-default': {},
+      '@apply shadow-none': {},
+      '@apply text-disabled': {},
+    },
+
+    '.interactive-quiet.interactive-disabled': {
+      '@apply bg-transparent': {},
+    },
+  });
+}

package/plugins/line-clamp.js

@@ -0,0 +1,44 @@
+'use strict';
+
+const plugin = require('tailwindcss/plugin');
+
+const addLineClampUtilities = ({ addUtilities }) => {
+  let clampUtility = {};
+
+  for (let c = 1; c <= 10; c++) {
+    clampUtility[`.clamp-${c}`] = {
+      display: '-webkit-box',
+      '-webkit-line-clamp': `${c}`,
+      '-webkit-box-orient': 'vertical',
+      overflow: 'hidden',
+    };
+  }
+
+  return addUtilities(clampUtility);
+};
+
+/*
+  Clamp
+
+  this adds overflow hidden and ellipsis for multiple lines of text
+  The following utility is added for creating truncated line:
+
+  clamp-<lineNumber>
+
+  This currently support up to 10 lines.
+
+  Examples
+
+    <div>
+      <span class="clamp-7">
+        Green juice tumeric coloring book, before they sold out sartorial post-ironic edison bulb. Beard fashion axe +1 hell of, bushwick ugh kogi pickled williamsburg chartreuse. Kale chips normcore cornhole, art party before they sold out PBR&B kogi roof party listicle taxidermy asymmetrical actually hot chicken. Etsy XOXO freegan trust fund bicycle rights, cronut meditation chillwave ramps meggings letterpress.
+        Pork belly yr pickled twee shaman biodiesel hammock tattooed etsy keffiyeh literally semiotics forage tote bag. Kinfolk chicharrones wolf shaman butcher knausgaard. Ethical seitan beard hella asymmetrical. Prism trust fund lomo, next level sriracha iceland snackwave sustainable chillwave locavore gluten-free drinking vinegar raclette yr. Edison bulb celiac brunch flexitarian. Beard yuccie venmo keytar chillwave tbh trust fund locavore.
+      </span>
+    </div>
+
+  This will truncate the paragraph after 7 lines and show an ellipsis
+
+*/
+module.exports = plugin(function (pluginApi) {
+  addLineClampUtilities(pluginApi);
+});

package/plugins/theme-plugin.js

@@ -0,0 +1,42 @@
+'use strict';
+
+const plugin = require('tailwindcss/plugin');
+
+module.exports = function (themesData) {
+  const addThemeColorBaseClasses = ({ addBase }) => {
+    let generatedCss = Object.entries(themesData.themes).reduce((css, [, themeData]) => {
+      css[themeData.cssSelector] = themeData.colors.reduce((acc, { name, value }) => {
+        acc[`--${name}`] = value;
+
+        return acc;
+      }, {});
+
+      return css;
+    }, {});
+
+    addBase(generatedCss);
+  };
+
+  const addThemeShadowBaseClasses = ({ addBase }) => {
+    let generatedCss = Object.entries(themesData.themes).reduce((css, [, themeData]) => {
+      css[themeData.cssSelector] = themeData.shadows.reduce((acc, { name, effects }) => {
+        acc[`--${name}`] = effects.join(', ');
+
+        return acc;
+      }, {});
+
+      return css;
+    }, {});
+
+    addBase(generatedCss);
+  };
+
+  /*
+    This plugin will add base classes for each theme which specify all of the color
+    values for that theme.
+  */
+  return plugin(function (pluginApi) {
+    addThemeColorBaseClasses(pluginApi);
+    addThemeShadowBaseClasses(pluginApi);
+  });
+};

package/plugins/typography.js

@@ -0,0 +1,140 @@
+'use strict';
+
+const plugin = require('tailwindcss/plugin');
+
+module.exports = (fontSizes) =>
+  plugin((pluginApi) => {
+    addTextStyles(pluginApi, fontSizes);
+  });
+
+function addTextStyles({ addComponents, theme }, fontSize) {
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering
+  let geometricPrecision = { textRendering: 'geometricPrecision' };
+  let underline = { textDecoration: 'underline' };
+
+  let text = {
+    '.geometric-precision-text': {
+      ...geometricPrecision,
+    },
+  };
+
+  /**
+   * NOTE:
+   * We cannot use theme('fontSize.XY') for everything because it contains both
+   * fontSize and lineHeight when used in this type of object, every usage
+   * provides *two* fontSizes (one desired, one is supposed to be the lineHeight,
+   * but is interpreted as a fontSize here).
+   */
+  let textStyles = {
+    '.type-4xl': {
+      fontSize: fontSize['4xl'],
+      lineHeight: theme('lineHeight.13'),
+      fontWeight: theme('fontWeight.medium'),
+      letterSpacing: theme('letterSpacing.tight'),
+    },
+    '.type-3xl': {
+      fontSize: fontSize['3xl'],
+      lineHeight: theme('lineHeight.12'),
+      fontWeight: theme('fontWeight.medium'),
+      letterSpacing: theme('letterSpacing.tight'),
+    },
+    '.type-2xl': {
+      fontSize: fontSize['2xl'],
+      lineHeight: theme('lineHeight.10'),
+      fontWeight: theme('fontWeight.medium'),
+    },
+    '.type-xl': {
+      fontSize: fontSize.xl,
+      lineHeight: theme('lineHeight.8'),
+      fontWeight: theme('fontWeight.medium'),
+      ...geometricPrecision,
+    },
+    '.type-lg': {
+      fontSize: fontSize.lg,
+      lineHeight: theme('lineHeight.8'),
+    },
+    '.type-lg-medium': {
+      fontSize: fontSize.lg,
+      lineHeight: theme('lineHeight.8'),
+      fontWeight: theme('fontWeight.medium'),
+    },
+    '.type-lg-tight-medium': {
+      fontSize: fontSize.lg,
+      lineHeight: theme('lineHeight.6'),
+      fontWeight: theme('fontWeight.medium'),
+      ...geometricPrecision,
+    },
+    '.type-md': {
+      fontSize: fontSize.md,
+      lineHeight: theme('lineHeight.6'),
+    },
+    // deprecated? md-medium?
+    '.type-md-medium': {
+      fontSize: fontSize.md,
+      lineHeight: theme('lineHeight.6'),
+      fontWeight: theme('fontWeight.medium'),
+    },
+    '.type-md-underline': {
+      fontSize: fontSize.md,
+      lineHeight: theme('lineHeight.6'),
+      ...underline,
+    },
+    '.type-md-tight': {
+      fontSize: fontSize.md,
+      lineHeight: theme('lineHeight.5'),
+    },
+    '.type-md-tight-medium': {
+      fontSize: fontSize.md,
+      lineHeight: theme('lineHeight.5'),
+      fontWeight: theme('fontWeight.medium'),
+      ...geometricPrecision,
+    },
+    '.type-md-tight-underline': {
+      fontSize: fontSize.md,
+      lineHeight: theme('lineHeight.5'),
+      ...underline,
+    },
+    '.type-sm-mono': {
+      fontSize: fontSize.sm,
+      lineHeight: theme('lineHeight.6'),
+      fontFamily: theme('fontFamily.mono'),
+    },
+    '.type-sm-mono-tight': {
+      fontSize: fontSize.sm,
+      fontFamily: theme('fontFamily.mono'),
+      lineHeight: theme('lineHeight.5'),
+    },
+    '.type-sm-mono-underline': {
+      fontSize: fontSize.sm,
+      lineHeight: theme('lineHeight.6'),
+      fontFamily: theme('fontFamily.mono'),
+      ...underline,
+    },
+    '.type-xs': {
+      fontSize: fontSize.xs,
+      lineHeight: theme('lineHeight.5'),
+    },
+    '.type-xs-tight': {
+      fontSize: fontSize.xs,
+      lineHeight: theme('lineHeight.4'),
+    },
+    '.type-xs-tight-underline': {
+      fontSize: fontSize.xs,
+      lineHeight: theme('lineHeight.4'),
+      ...underline,
+    },
+    '.type-xs-mono': {
+      fontSize: fontSize.xs,
+      lineHeight: theme('lineHeight.6'),
+      fontFamily: theme('fontFamily.mono'),
+    },
+    '.type-xxs-mono': {
+      fontSize: fontSize.xxs,
+      lineHeight: theme('lineHeight.4'),
+      fontFamily: theme('fontFamily.mono'),
+    },
+  };
+
+  addComponents(textStyles);
+  addComponents(text);
+}

package/plugins/variables.js

@@ -0,0 +1,45 @@
+'use strict';
+
+const plugin = require('tailwindcss/plugin');
+
+const FALCON_VARIBALES = {
+  '--side-nav-width-collapsed': '122px',
+  '--side-nav-width-expanded': '247px',
+
+  '--tab-list-height': '40px',
+  '--tab-height': '40px',
+  '--tab-border-radius': '8px',
+
+  '--process-offset-top': '40px',
+
+  '--default-animation-duration': '125ms',
+  '--default-animation-timing-function': 'ease-out',
+
+  '--default-animation-settings':
+    'var(--default-animation-duration) var(--default-animation-timing-function)',
+};
+
+module.exports = plugin(function ({ addComponents, theme }) {
+  let roots = {};
+
+  // See: https://tailwindcss.com/docs/margin/#app
+  //      for values
+  let space = theme(`space`);
+
+  if (!space) {
+    throw new Error('TailwindCSS 1.9.6 or greater is required');
+  }
+
+  for (let [specifier, amount] of Object.entries(space)) {
+    let varName = `--space-${specifier}`;
+
+    roots[varName] = amount;
+  }
+
+  addComponents({
+    ':root': {
+      ...roots,
+      ...FALCON_VARIBALES,
+    },
+  });
+});