@codecademy/gamut-styles 17.9.1-alpha.2ea313.0 → 17.9.1-alpha.3e8b72.0

package/dist/variance/config.js

@@ -1,514 +0,0 @@
-import { transformSize } from '@codecademy/variance';
-export const color = {
-  color: {
-    property: 'color',
-    scale: 'colors'
-  },
-  textColor: {
-    property: 'color',
-    scale: 'colors'
-  },
-  bg: {
-    property: 'backgroundColor',
-    scale: 'colors'
-  },
-  borderColor: {
-    property: 'borderColor',
-    scale: 'colors'
-  },
-  borderColorX: {
-    property: 'borderColor',
-    properties: ['borderLeftColor', 'borderRightColor'],
-    scale: 'colors'
-  },
-  borderColorY: {
-    property: 'borderColor',
-    properties: ['borderTopColor', 'borderBottomColor'],
-    scale: 'colors'
-  },
-  borderColorLeft: {
-    property: 'borderLeftColor',
-    scale: 'colors'
-  },
-  borderColorRight: {
-    property: 'borderRightColor',
-    scale: 'colors'
-  },
-  borderColorTop: {
-    property: 'borderTopColor',
-    scale: 'colors'
-  },
-  borderColorBottom: {
-    property: 'borderBottomColor',
-    scale: 'colors'
-  }
-};
-export const border = {
-  // Border
-  border: {
-    property: 'border',
-    scale: 'borders'
-  },
-  borderX: {
-    property: 'border',
-    properties: ['borderLeft', 'borderRight'],
-    scale: 'borders'
-  },
-  borderY: {
-    property: 'border',
-    properties: ['borderTop', 'borderBottom'],
-    scale: 'borders'
-  },
-  borderTop: {
-    property: 'borderTop',
-    scale: 'borders'
-  },
-  borderRight: {
-    property: 'borderRight',
-    scale: 'borders'
-  },
-  borderBottom: {
-    property: 'borderBottom',
-    scale: 'borders'
-  },
-  borderLeft: {
-    property: 'borderLeft',
-    scale: 'borders'
-  },
-  // Width
-  borderWidth: {
-    property: 'borderWidth'
-  },
-  borderWidthX: {
-    property: 'borderWidth',
-    properties: ['borderLeftWidth', 'borderRightWidth']
-  },
-  borderWidthY: {
-    property: 'borderWidth',
-    properties: ['borderTopWidth', 'borderBottomWidth']
-  },
-  borderWidthLeft: {
-    property: 'borderLeftWidth'
-  },
-  borderWidthRight: {
-    property: 'borderRightWidth'
-  },
-  borderWidthTop: {
-    property: 'borderTopWidth'
-  },
-  borderWidthBottom: {
-    property: 'borderBottomWidth'
-  },
-  // Radius
-  borderRadius: {
-    property: 'borderRadius',
-    scale: 'borderRadii'
-  },
-  borderRadiusLeft: {
-    property: 'borderRadius',
-    properties: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
-    scale: 'borderRadii'
-  },
-  borderRadiusTop: {
-    property: 'borderRadius',
-    properties: ['borderTopLeftRadius', 'borderTopRightRadius'],
-    scale: 'borderRadii'
-  },
-  borderRadiusBottom: {
-    property: 'borderRadius',
-    properties: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
-    scale: 'borderRadii'
-  },
-  borderRadiusRight: {
-    property: 'borderRadius',
-    properties: ['borderTopRightRadius', 'borderBottomRightRadius'],
-    scale: 'borderRadii'
-  },
-  borderRadiusTopLeft: {
-    property: 'borderTopLeftRadius',
-    scale: 'borderRadii'
-  },
-  borderRadiusTopRight: {
-    property: 'borderTopRightRadius',
-    scale: 'borderRadii'
-  },
-  borderRadiusBottomRight: {
-    property: 'borderBottomRightRadius',
-    scale: 'borderRadii'
-  },
-  borderRadiusBottomLeft: {
-    property: 'borderBottomLeftRadius',
-    scale: 'borderRadii'
-  },
-  // Style
-  borderStyle: {
-    property: 'borderStyle'
-  },
-  borderStyleX: {
-    property: 'borderStyle',
-    properties: ['borderLeftStyle', 'borderRightStyle']
-  },
-  borderStyleY: {
-    property: 'borderStyle',
-    properties: ['borderTopStyle', 'borderBottomStyle']
-  },
-  borderStyleLeft: {
-    property: 'borderLeftStyle'
-  },
-  borderStyleRight: {
-    property: 'borderRightStyle'
-  },
-  borderStyleTop: {
-    property: 'borderTopStyle'
-  },
-  borderStyleBottom: {
-    property: 'borderBottomStyle'
-  }
-};
-const selfAlignments = {
-  justifySelf: {
-    property: 'justifySelf'
-  },
-  alignSelf: {
-    property: 'alignSelf'
-  },
-  gridArea: {
-    property: 'gridArea'
-  }
-};
-const alignments = {
-  justifyContent: {
-    property: 'justifyContent'
-  },
-  justifyItems: {
-    property: 'justifyItems'
-  },
-  alignItems: {
-    property: 'alignItems'
-  },
-  alignContent: {
-    property: 'alignContent'
-  },
-  ...selfAlignments
-};
-const flexItems = {
-  flexBasis: {
-    property: 'flexBasis'
-  },
-  flexShrink: {
-    property: 'flexShrink'
-  },
-  flexGrow: {
-    property: 'flexGrow'
-  },
-  order: {
-    property: 'order'
-  }
-};
-export const flex = {
-  flexDirection: {
-    property: 'flexDirection'
-  },
-  flexWrap: {
-    property: 'flexWrap'
-  },
-  flex: {
-    property: 'flex'
-  },
-  ...alignments,
-  ...flexItems
-};
-const gridItems = {
-  gridColumn: {
-    property: 'gridColumn'
-  },
-  gridRow: {
-    property: 'gridRow'
-  },
-  gridColumnStart: {
-    property: 'gridColumnStart'
-  },
-  gridRowStart: {
-    property: 'gridRowStart'
-  },
-  gridColumnEnd: {
-    property: 'gridColumnEnd'
-  },
-  gridRowEnd: {
-    property: 'gridRowEnd'
-  }
-};
-export const grid = {
-  gridAutoColumns: {
-    property: 'gridAutoColumns'
-  },
-  gridAutoRows: {
-    property: 'gridAutoRows'
-  },
-  gridTemplateColumns: {
-    property: 'gridTemplateColumns'
-  },
-  gridTemplateRows: {
-    property: 'gridTemplateRows'
-  },
-  gridTemplateAreas: {
-    property: 'gridTemplateAreas'
-  },
-  gridAutoFlow: {
-    property: 'gridAutoFlow'
-  },
-  gap: {
-    property: 'gap',
-    scale: 'spacing'
-  },
-  rowGap: {
-    property: 'rowGap',
-    scale: 'spacing'
-  },
-  columnGap: {
-    property: 'columnGap',
-    scale: 'spacing'
-  },
-  ...alignments,
-  ...gridItems
-};
-export const background = {
-  background: {
-    property: 'background'
-  },
-  backgroundImage: {
-    property: 'backgroundImage'
-  },
-  backgroundSize: {
-    property: 'backgroundSize'
-  },
-  backgroundRepeat: {
-    property: 'backgroundRepeat'
-  },
-  backgroundPosition: {
-    property: 'backgroundPosition'
-  }
-};
-export const positioning = {
-  position: {
-    property: 'position'
-  },
-  inset: {
-    property: 'inset',
-    properties: ['top', 'right', 'bottom', 'left'],
-    transform: transformSize
-  },
-  top: {
-    property: 'top',
-    transform: transformSize
-  },
-  right: {
-    property: 'right',
-    transform: transformSize
-  },
-  bottom: {
-    property: 'bottom',
-    transform: transformSize
-  },
-  left: {
-    property: 'left',
-    transform: transformSize
-  },
-  zIndex: {
-    property: 'zIndex'
-  },
-  opacity: {
-    property: 'opacity'
-  }
-};
-export const shadows = {
-  boxShadow: {
-    property: 'boxShadow'
-  },
-  textShadow: {
-    property: 'textShadow'
-  }
-};
-export const layout = {
-  containerType: {
-    property: 'containerType'
-  },
-  display: {
-    property: 'display'
-  },
-  overflow: {
-    property: 'overflow'
-  },
-  overflowX: {
-    property: 'overflowX'
-  },
-  overflowY: {
-    property: 'overflowY'
-  },
-  dimensions: {
-    property: 'width',
-    properties: ['width', 'height'],
-    transform: transformSize
-  },
-  width: {
-    property: 'width',
-    transform: transformSize
-  },
-  minWidth: {
-    property: 'minWidth',
-    transform: transformSize
-  },
-  maxWidth: {
-    property: 'maxWidth',
-    transform: transformSize
-  },
-  height: {
-    property: 'height',
-    transform: transformSize
-  },
-  minHeight: {
-    property: 'minHeight',
-    transform: transformSize
-  },
-  maxHeight: {
-    property: 'maxHeight',
-    transform: transformSize
-  },
-  verticalAlign: {
-    property: 'verticalAlign'
-  },
-  ...selfAlignments,
-  ...gridItems,
-  ...flexItems
-};
-export const list = {
-  listStyle: {
-    property: 'listStyle'
-  },
-  listStyleType: {
-    property: 'listStyleType'
-  },
-  listStylePosition: {
-    property: 'listStylePosition'
-  },
-  listStyleImage: {
-    property: 'listStyleImage'
-  }
-};
-export const typography = {
-  fontFamily: {
-    property: 'fontFamily',
-    scale: 'fontFamily'
-  },
-  fontWeight: {
-    property: 'fontWeight',
-    scale: 'fontWeight'
-  },
-  lineHeight: {
-    property: 'lineHeight',
-    scale: 'lineHeight'
-  },
-  fontSize: {
-    property: 'fontSize',
-    scale: 'fontSize'
-  },
-  letterSpacing: {
-    property: 'letterSpacing'
-  },
-  textAlign: {
-    property: 'textAlign'
-  },
-  fontStyle: {
-    property: 'fontStyle'
-  },
-  textDecoration: {
-    property: 'textDecoration'
-  },
-  textTransform: {
-    property: 'textTransform'
-  },
-  whiteSpace: {
-    property: 'whiteSpace'
-  }
-};
-export const margin = {
-  m: {
-    property: 'margin',
-    scale: 'spacing'
-  },
-  mx: {
-    property: 'margin',
-    properties: ['marginLeft', 'marginRight'],
-    scale: 'spacing'
-  },
-  my: {
-    property: 'margin',
-    properties: ['marginTop', 'marginBottom'],
-    scale: 'spacing'
-  },
-  mt: {
-    property: 'marginTop',
-    scale: 'spacing'
-  },
-  mb: {
-    property: 'marginBottom',
-    scale: 'spacing'
-  },
-  mr: {
-    property: 'marginRight',
-    scale: 'spacing'
-  },
-  ml: {
-    property: 'marginLeft',
-    scale: 'spacing'
-  }
-};
-export const padding = {
-  p: {
-    property: 'padding',
-    scale: 'spacing'
-  },
-  px: {
-    property: 'padding',
-    properties: ['paddingLeft', 'paddingRight'],
-    scale: 'spacing'
-  },
-  py: {
-    property: 'padding',
-    properties: ['paddingTop', 'paddingBottom'],
-    scale: 'spacing'
-  },
-  pt: {
-    property: 'paddingTop',
-    scale: 'spacing'
-  },
-  pb: {
-    property: 'paddingBottom',
-    scale: 'spacing'
-  },
-  pr: {
-    property: 'paddingRight',
-    scale: 'spacing'
-  },
-  pl: {
-    property: 'paddingLeft',
-    scale: 'spacing'
-  }
-};
-export const space = {
-  ...margin,
-  ...padding
-};
-export const all = {
-  ...typography,
-  ...space,
-  ...shadows,
-  ...grid,
-  ...flex,
-  ...layout,
-  ...positioning,
-  ...border,
-  ...background,
-  ...color,
-  ...list
-};

package/dist/variance/index.d.ts

@@ -1,3 +0,0 @@
-export * as system from './props';
-export { css, variant, states } from './props';
-export * from './utils';

package/dist/variance/index.js

@@ -1,3 +0,0 @@
-export * as system from './props';
-export { css, variant, states } from './props';
-export * from './utils';