How to use the @kiwicom/orbit-design-tokens.defaultTokens.borderWidthCard function in @kiwicom/orbit-design-tokens

To help you get started, we’ve selected a few @kiwicom/orbit-design-tokens examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github kiwicom / margarita / apps / core / components / ItineraryCard / ItineraryCardWrapper.web.js View on Github external
price: {
    minWidth: 80,
    marginEnd: 10,
  },
  sectors: {
    flex: 1,
  },
  footer: {
    marginTop: parseInt(defaultTokens.spaceMedium, 10),
    paddingTop: parseInt(defaultTokens.spaceMedium, 10),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderStyle: 'dotted',
    borderColor: designTokens.borderColorInkLight,
    borderTopWidth: parseInt(defaultTokens.borderWidthCard, 10),
  },
});

const layoutSelect = ({ layout }: LayoutContextState) => ({
  layout,
});

export default withLayoutContext(layoutSelect)(ItineraryCardWrapper);
github kiwicom / margarita / apps / core / components / priceSummary / PriceSummary.js View on Github external
}

const styles = StyleSheet.create({
  backgroundOverlay: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    start: 0,
    end: 0,
    backgroundColor: designTokens.backdropColor,
  },
  container: {
    backgroundColor: defaultTokens.backgroundCard,
    borderColor: defaultTokens.borderColorTableCell,
    borderTopWidth: parseFloat(defaultTokens.borderWidthCard),
    borderStartWidth: parseFloat(defaultTokens.borderWidthCard),
    borderEndWidth: parseFloat(defaultTokens.borderWidthCard),
    borderTopStartRadius: parseFloat(defaultTokens.borderRadiusBadge),
    borderTopEndRadius: parseFloat(defaultTokens.borderRadiusBadge),
    padding: parseFloat(defaultTokens.spaceMedium),
    paddingTop: parseFloat(defaultTokens.spaceXXSmall),
    web: {
      alignItems: 'center',
    },
  },
  lastItem: {
    marginBottom: parseFloat(defaultTokens.spaceMedium),
  },
  table: {
    marginStart: parseFloat(defaultTokens.spaceXSmall),
  },
  contentContainer: {
github kiwicom / margarita / src / RowOption / RowOption.js View on Github external
flex: 1,
  },
  contentContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 10,
  },
  longSeparator: {
    borderColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: parseFloat(defaultTokens.borderWidthCard),
  },
  shortSeparator: {
    borderColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: parseFloat(defaultTokens.borderWidthCard),
  },
});
github kiwicom / margarita / packages / universal-components / src / RangeDatePicker / components / DayNames.js View on Github external
export default function DayNames({ weekStartsOn }: Props) {
  const dayNames = getDayNames(weekStartsOn);
  return (
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    borderBottomColor: defaultTokens.borderColorTableCell,
    borderBottomWidth: parseFloat(defaultTokens.borderWidthCard),
    padding: parseFloat(defaultTokens.spaceXSmall),
  },
  dayNameContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: designTokens.paddingCalendarItem / 2,
  },
  dayName: {
    color: defaultTokens.colorTextSecondary,
  },
});
github kiwicom / margarita / packages / universal-components / src / RowOption / RowOption.js View on Github external
flex: 1,
  },
  contentContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 10,
  },
  longSeparator: {
    borderColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: parseFloat(defaultTokens.borderWidthCard),
  },
  shortSeparator: {
    borderColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: parseFloat(defaultTokens.borderWidthCard),
  },
});
github kiwicom / margarita / apps / core / scenes / search / PlacePicker / PlacePickerList.js View on Github external
);
};

const styles = StyleSheet.create({
  item: {
    borderBottomWidth: parseFloat(defaultTokens.borderWidthCard),
    borderBottomColor: defaultTokens.borderColorCard,
  },
});

export default createFragmentContainer(
  PlacePickerList,
  graphql`
    fragment PlacePickerList_locations on LocationConnection {
      edges {
        node {
          id
          ...PlaceItem_item
        }
      }
    }
  `,
github kiwicom / margarita / apps / core / components / priceSummary / PriceSummary.js View on Github external
}
}

const styles = StyleSheet.create({
  backgroundOverlay: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    start: 0,
    end: 0,
    backgroundColor: designTokens.backdropColor,
  },
  container: {
    backgroundColor: defaultTokens.backgroundCard,
    borderColor: defaultTokens.borderColorTableCell,
    borderTopWidth: parseFloat(defaultTokens.borderWidthCard),
    borderStartWidth: parseFloat(defaultTokens.borderWidthCard),
    borderEndWidth: parseFloat(defaultTokens.borderWidthCard),
    borderTopStartRadius: parseFloat(defaultTokens.borderRadiusBadge),
    borderTopEndRadius: parseFloat(defaultTokens.borderRadiusBadge),
    padding: parseFloat(defaultTokens.spaceMedium),
    paddingTop: parseFloat(defaultTokens.spaceXXSmall),
    web: {
      alignItems: 'center',
    },
  },
  lastItem: {
    marginBottom: parseFloat(defaultTokens.spaceMedium),
  },
  table: {
    marginStart: parseFloat(defaultTokens.spaceXSmall),
  },
github kiwicom / margarita / apps / core / components / passengerForm / PassengerForm.js View on Github external
borderTopEndRadius: parseInt(defaultTokens.borderRadiusBadge, 10),
      marginTop: parseInt(defaultTokens.spaceXXLarge, 10),
    },
  },
  widthLimit: {
    width: '100%',
    web: {
      maxWidth: 414,
    },
  },
  menuRow: {
    position: 'absolute',
    bottom: 0,
    flexDirection: 'row',
    backgroundColor: defaultTokens.paletteWhite,
    borderTopWidth: parseInt(defaultTokens.borderWidthCard, 10),
    borderColor: defaultTokens.borderColorTableCell,
    borderStartWidth: parseInt(defaultTokens.borderWidthCard, 10),
    borderEndWidth: parseInt(defaultTokens.borderWidthCard, 10),
    borderTopStartRadius: parseInt(defaultTokens.borderRadiusBadge, 10),
    borderTopEndRadius: parseInt(defaultTokens.borderRadiusBadge, 10),
    paddingHorizontal: parseInt(defaultTokens.spaceMedium, 10),
    paddingTop: parseInt(defaultTokens.spaceSmall, 10),
    paddingBottom: parseInt(defaultTokens.spaceXXLarge, 10),
    web: {
      paddingBottom: parseInt(defaultTokens.spaceMedium, 10),
    },
  },
  menuButtonWrap: {
    flex: 1,
  },
  spacer: {
github kiwicom / margarita / apps / landingPage / components / Info / Features.js View on Github external
flex-direction: column;
  @media (min-width: ${BREAKPOINTS.TABLET}px) {
    flex-direction: row;
  }
`;

const CardWrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80vw;
  height: 125px;
  margin-bottom: 20px;
  box-shadow: ${defaultTokens.boxShadowActionable};
  border-radius: ${defaultTokens.borderRadiusNormal};
  border: ${defaultTokens.borderStyleCard} ${defaultTokens.borderWidthCard}
    ${defaultTokens.borderColorCard};
  @media (min-width: ${BREAKPOINTS.TABLET}px) {
    width: 270px;
    height: 100px;
  }
`;
github kiwicom / margarita / apps / core / scenes / search / SortTabsWrapper.js View on Github external
priceDurationParams={priceDurationParams}
            selectedValue={this.props.sortBy}
            onValueChange={this.onValueChange}
          />