@stoplight/ui-kit 3.0.1 → 3.0.3

package/src/styles/tailwind/tailwind.config.js

@@ -1,412 +0,0 @@
-function getScssTheme(...path) {
-  return `get-theme(${path.join(' , ')})`;
-}
-
-function getScssThemeColors(color) {
-  return {
-    default: getScssTheme('colors', color, 5),
-    1: getScssTheme('colors', color, 1),
-    2: getScssTheme('colors', color, 2),
-    3: getScssTheme('colors', color, 3),
-    4: getScssTheme('colors', color, 4),
-    5: getScssTheme('colors', color, 5),
-    6: getScssTheme('colors', color, 6),
-    7: getScssTheme('colors', color, 7),
-    8: getScssTheme('colors', color, 8),
-    9: getScssTheme('colors', color, 9),
-  };
-}
-
-module.exports = {
-  prefix: '',
-  important: false,
-  separator: ':',
-  theme: {
-    colors: {
-      inherit: 'inherit',
-      transparent: getScssTheme('colors', 'transparent'),
-      lighten: getScssThemeColors('lighten'),
-      darken: getScssThemeColors('darken'),
-      disabled: getScssTheme('colors', 'disabled'),
-
-      black: getScssTheme('colors', 'black'),
-      white: getScssTheme('colors', 'white'),
-      gray: getScssThemeColors('gray'),
-
-      red: getScssThemeColors('red'),
-      orange: getScssThemeColors('orange'),
-      green: getScssThemeColors('green'),
-      blue: getScssThemeColors('blue'),
-      purple: getScssThemeColors('purple'),
-
-      // add so we have primary/info/etc classnames
-      primary: getScssTheme('colors', 'blue', 5),
-      info: getScssTheme('colors', 'blue', 5),
-      success: getScssTheme('colors', 'green', 5),
-      warning: getScssTheme('colors', 'orange', 5),
-      danger: getScssTheme('colors', 'red', 5),
-    },
-    spacing: {
-      px: '1px',
-      '0': '0',
-      '1': '0.25rem',
-      '2': '0.5rem',
-      '3': '0.75rem',
-      '4': '1rem',
-      '5': '1.25rem',
-      '6': '1.5rem',
-      '8': '2rem',
-      '10': '2.5rem',
-      '12': '3rem',
-      '16': '4rem',
-      '18': '4.285714286rem', // 60px at standard 14px page font size
-      '20': '5rem',
-      '24': '6rem',
-      '28': '7rem',
-      '32': '8rem',
-      '40': '10rem',
-      '48': '12rem',
-      '56': '14rem',
-      '64': '16rem',
-      '72': '18rem',
-      '80': '20rem',
-      '96': '24rem',
-      '128': '32rem',
-    },
-    screens: {
-      sm: { max: '767px' }, // mobile
-      md: { max: '1007px' }, // tablet
-      // lg: { min: '1008px' }, // desktop is the default
-      print: { raw: 'print' },
-    },
-    fontFamily: {
-      sans: [
-        '-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"',
-      ],
-      serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
-      mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
-    },
-    fontSize: {
-      xs: getScssTheme('fontSize, xs'),
-      sm: getScssTheme('fontSize', 'sm'),
-      base: getScssTheme('fontSize', 'base'),
-      lg: getScssTheme('fontSize', 'lg'),
-      xl: getScssTheme('fontSize', 'xl'),
-      '2xl': getScssTheme('fontSize', '2xl'),
-      '3xl': getScssTheme('fontSize', '3xl'),
-      '4xl': getScssTheme('fontSize', '4xl'),
-      '5xl': getScssTheme('fontSize', '5xl'),
-      '6xl': getScssTheme('fontSize', '6xl'),
-    },
-    fontWeight: {
-      hairline: getScssTheme('fontWeight', 'hairline'),
-      thin: getScssTheme('fontWeight', 'thin'),
-      light: getScssTheme('fontWeight', 'light'),
-      normal: getScssTheme('fontWeight', 'normal'),
-      medium: getScssTheme('fontWeight', 'medium'),
-      semibold: getScssTheme('fontWeight', 'semibold'),
-      bold: getScssTheme('fontWeight', 'bold'),
-      extrabold: getScssTheme('fontWeight', 'extrabold'),
-      black: getScssTheme('fontWeight', 'black'),
-    },
-    lineHeight: {
-      none: 1,
-      tight: 1.25,
-      snug: 1.375,
-      normal: 1.5,
-      relaxed: 1.625,
-      loose: 2,
-    },
-    letterSpacing: {
-      tighter: '-.05em',
-      tight: '-.025em',
-      normal: '0',
-      wide: '.025em',
-      wider: '.05em',
-      widest: '.1em',
-    },
-    textColor: theme => theme('colors'),
-    backgroundColor: theme => theme('colors'),
-    backgroundPosition: {
-      bottom: 'bottom',
-      center: 'center',
-      left: 'left',
-      'left-bottom': 'left bottom',
-      'left-top': 'left top',
-      right: 'right',
-      'right-bottom': 'right bottom',
-      'right-top': 'right top',
-      top: 'top',
-    },
-    backgroundSize: {
-      auto: 'auto',
-      cover: 'cover',
-      contain: 'contain',
-    },
-    borderWidth: {
-      default: '1px',
-      '0': '0',
-      '2': '2px',
-      '4': '4px',
-      '8': '8px',
-    },
-    borderColor: theme => ({
-      ...theme('colors'),
-      default: theme('colors').gray[3],
-    }),
-    borderRadius: {
-      none: getScssTheme('borderRadius', 'none'),
-      sm: getScssTheme('borderRadius', 'sm'),
-      default: getScssTheme('borderRadius', 'default'),
-      lg: getScssTheme('borderRadius', 'lg'),
-      full: getScssTheme('borderRadius', 'full'),
-    },
-    cursor: {
-      auto: 'auto',
-      default: 'default',
-      pointer: 'pointer',
-      wait: 'wait',
-      move: 'move',
-      'not-allowed': 'not-allowed',
-    },
-    width: theme => ({
-      auto: 'auto',
-      ...theme('spacing'),
-      '1/2': '50%',
-      '1/3': '33.33333%',
-      '2/3': '66.66667%',
-      '1/4': '25%',
-      '3/4': '75%',
-      '1/5': '20%',
-      '2/5': '40%',
-      '3/5': '60%',
-      '4/5': '80%',
-      '1/6': '16.66667%',
-      '5/6': '83.33333%',
-      full: '100%',
-      screen: '100vw',
-    }),
-    height: theme => ({
-      auto: 'auto',
-      ...theme('spacing'),
-      full: '100%',
-      screen: '100vh',
-    }),
-    minWidth: {
-      '0': '0',
-      full: '100%',
-    },
-    minHeight: {
-      '0': '0',
-      full: '100%',
-      screen: '100vh',
-    },
-    maxWidth: {
-      xs: '20rem',
-      sm: '24rem',
-      md: '28rem',
-      lg: '32rem',
-      xl: '36rem',
-      '2xl': '42rem',
-      '3xl': '48rem',
-      '4xl': '56rem',
-      '5xl': '64rem',
-      '6xl': '72rem',
-      full: '100%',
-    },
-    maxHeight: {
-      full: '100%',
-      screen: '100vh',
-    },
-    padding: theme => theme('spacing'),
-    margin: theme => ({
-      auto: 'auto',
-      ...theme('spacing'),
-      '-px': '-1px',
-      '-1': '-0.25rem',
-      '-2': '-0.5rem',
-      '-3': '-0.75rem',
-      '-4': '-1rem',
-      '-5': '-1.25rem',
-      '-6': '-1.5rem',
-      '-8': '-2rem',
-      '-10': '-2.5rem',
-      '-12': '-3rem',
-      '-16': '-4rem',
-      '-20': '-5rem',
-      '-24': '-6rem',
-      '-32': '-8rem',
-      '-40': '-10rem',
-      '-48': '-12rem',
-      '-56': '-14rem',
-      '-64': '-16rem',
-    }),
-    negativeMargin: theme => theme('spacing'),
-    objectPosition: {
-      bottom: 'bottom',
-      center: 'center',
-      left: 'left',
-      'left-bottom': 'left bottom',
-      'left-top': 'left top',
-      right: 'right',
-      'right-bottom': 'right bottom',
-      'right-top': 'right top',
-      top: 'top',
-    },
-    boxShadow: {
-      default: getScssTheme('boxShadow', 'default'),
-      md: getScssTheme('boxShadow', 'md'),
-      lg: getScssTheme('boxShadow', 'lg'),
-      inner: getScssTheme('boxShadow', 'inner'),
-      outline: getScssTheme('boxShadow', 'outline'),
-      none: getScssTheme('boxShadow', 'none'),
-    },
-    zIndex: {
-      auto: 'auto',
-      '0': 0,
-      '10': 10,
-      '20': 20,
-      '30': 30,
-      '40': 40,
-      '50': 50,
-    },
-    opacity: {
-      '0': '0',
-      '25': '.25',
-      '50': '.5',
-      '75': '.75',
-      '100': '1',
-    },
-    fill: {
-      current: 'currentColor',
-    },
-    stroke: {
-      current: 'currentColor',
-    },
-    flex: {
-      '1': '1 1 0%',
-      auto: '1 1 auto',
-      initial: '0 1 auto',
-      none: 'none',
-    },
-    flexGrow: {
-      '0': 0,
-      default: 1,
-    },
-    flexShrink: {
-      '0': 0,
-      default: 1,
-    },
-    listStyleType: {
-      none: 'none',
-      disc: 'disc',
-      decimal: 'decimal',
-    },
-    inset: {
-      '0': 0,
-      auto: 'auto',
-    },
-    container: {},
-  },
-  variants: {
-    appearance: [],
-    backgroundAttachment: [],
-    backgroundColor: ['hover', 'focus', 'active', 'group-hover', 'dark', 'dark-hover', 'dark-active'],
-    backgroundPosition: [],
-    backgroundRepeat: [],
-    backgroundSize: [],
-    borderCollapse: [],
-    borderColor: ['hover', 'focus', 'active', 'dark'],
-    borderRadius: [],
-    borderStyle: [],
-    borderWidth: ['dark'],
-    cursor: [],
-    display: ['responsive', 'group-hover'],
-    flexDirection: ['responsive'],
-    flexWrap: ['responsive'],
-    alignItems: ['responsive'],
-    alignSelf: [],
-    justifyContent: ['responsive'],
-    alignContent: [],
-    flex: ['responsive'],
-    flexGrow: [],
-    flexShrink: [],
-    float: [],
-    fontFamily: [],
-    fontWeight: ['hover', 'focus'],
-    height: ['responsive'],
-    lineHeight: [],
-    listStylePosition: [],
-    listStyleType: [],
-    margin: ['responsive', 'group-hover'],
-    maxHeight: [],
-    maxWidth: [],
-    minHeight: [],
-    minWidth: [],
-    negativeMargin: [],
-    objectFit: [],
-    objectPosition: [],
-    opacity: ['hover', 'focus', 'group-hover'],
-    outline: ['focus'],
-    overflow: ['responsive'],
-    padding: ['responsive'],
-    pointerEvents: [],
-    position: ['responsive'],
-    inset: [],
-    resize: [],
-    boxShadow: ['hover', 'focus', 'dark'],
-    fill: [],
-    stroke: [],
-    tableLayout: [],
-    textAlign: ['responsive'],
-    textColor: ['hover', 'focus', 'active', 'dark', 'group-hover'],
-    fontSize: ['responsive'],
-    fontStyle: [],
-    textTransform: [],
-    textDecoration: ['hover', 'focus'],
-    fontSmoothing: [],
-    letterSpacing: [],
-    userSelect: [],
-    verticalAlign: [],
-    visibility: ['responsive', 'group-hover'],
-    whitespace: ['responsive'],
-    wordBreak: ['responsive'],
-    width: ['responsive', 'hover'],
-    zIndex: ['hover'],
-  },
-  corePlugins: {},
-  plugins: [
-    function ({ addVariant, e }) {
-      addVariant('dark', ({ separator, container }) => {
-        container.walkRules(rule => {
-          rule.selector = `.${process.env.BLUEPRINT_NAMESPACE || 'bp3'}-dark .${e(
-            `dark${separator}${rule.selector.slice(1)}`,
-          )}`;
-        });
-      });
-      addVariant('dark-hover', ({ modifySelectors, separator }) => {
-        modifySelectors(({ className }) => {
-          return `.${process.env.BLUEPRINT_NAMESPACE || 'bp3'}-dark .${e(`dark-hover${separator}${className}`)}:hover`;
-        });
-      });
-      addVariant('dark-active', ({ modifySelectors, separator }) => {
-        modifySelectors(({ className }) => {
-          return `.${process.env.BLUEPRINT_NAMESPACE || 'bp3'}-dark .${e(
-            `dark-active${separator}${className}`,
-          )}:active`;
-        });
-      });
-    },
-  ],
-};

package/src/types.ts

@@ -1,3 +0,0 @@
-export type Dictionary<T, K extends string | number = string> = {
-  [key in K]: T;
-};

package/tsconfig.build.json

@@ -1,15 +0,0 @@
-// This config is used by `sl-scripts build` and `sl-scripts build.docs`
-{
-  "extends": "./tsconfig.json",
-
-  // NOTE: must only include one element, otherwise build process into dist folder ends up with incorrect structure
-  "include": ["src"],
-
-  // Ignore dev folders like __tests__ and __stories__ when building for distribution
-  "exclude": ["**/__*__/**"],
-
-  "compilerOptions": {
-    "outDir": "dist",
-    "module": "commonjs"
-  }
-}

package/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "@stoplight/scripts",
-  // target all ts files
-  "include": ["src"],
-  "compilerOptions": {
-    "lib": ["dom", "ES2020"],
-    "target": "es2017",
-    "esModuleInterop": true,
-  }
-}