How to use the @kiwicom/orbit-design-tokens.defaultTokens.borderRadiusNormal 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 / packages / universal-components / src / RowOption / RowOptionRightButton.js View on Github external
style={styles.plusButton}
      testID="add-button"
    >
      
    
  );
}

const styles = StyleSheet.create({
  plusButton: {
    backgroundColor: defaultTokens.backgroundAlertSuccess,
    borderRadius: parseFloat(defaultTokens.borderRadiusNormal),
    marginEnd: 10,
    padding: 2,
  },
});
github kiwicom / margarita / packages / universal-components / src / Accordion / Accordion.js View on Github external
{header(expanded)}
          {expanded ? children : null}
        
      
    );
  }
}

const styles = StyleSheet.create({
  accordion: {
    justifyContent: 'center',
    marginVertical: 4,
    paddingHorizontal: 4,
    borderColor: defaultTokens.paletteInkLight,
    borderWidth: 0.5,
    borderRadius: parseFloat(defaultTokens.borderRadiusNormal),
    backgroundColor: defaultTokens.paletteWhite,
    android: {
      elevation: 1,
    },
    ios: {
      shadowOffset: {
        width: 0,
        height: 2,
      },
      shadowOpacity: 0.1,
      shadowColor: defaultTokens.paletteInkDark,
    },
    web: {
      boxShadow: '0px 2px 4px rgba(23,27,30,0.1)',
      width: '100%',
    },
github kiwicom / margarita / packages / universal-components / src / RangeDatePicker / components / RenderDay.js View on Github external
day: {
    fontSize: designTokens.fontSizeCalendarItem,
  },
  price: {
    fontSize: parseFloat(defaultTokens.fontSizeTextSmall),
    color: defaultTokens.colorTextSecondary,
  },
  selectedDatesContainer: {
    backgroundColor: defaultTokens.backgroundButtonInfo,
  },
  startOfSelectedDatesContainer: {
    borderTopStartRadius: parseFloat(defaultTokens.borderRadiusNormal),
    borderBottomStartRadius: parseFloat(defaultTokens.borderRadiusNormal),
  },
  endOfSelectedDatesContainer: {
    borderTopEndRadius: parseFloat(defaultTokens.borderRadiusNormal),
    borderBottomEndRadius: parseFloat(defaultTokens.borderRadiusNormal),
  },
  selectedDatesText: {
    color: defaultTokens.colorTextButtonPrimary,
  },
  dayInPast: {
    color: defaultTokens.colorTextSecondary,
  },
  leftArrow: {
    start: 0,
    top: 12,
    android: {
      top: 0,
    },
    web: {
      top: 6,
github kiwicom / margarita / packages / universal-components / src / RangeDatePicker / components / RenderDay.js View on Github external
web: {
      height: designTokens.heightCalendarItem,
    },
  },
  day: {
    fontSize: designTokens.fontSizeCalendarItem,
  },
  price: {
    fontSize: parseFloat(defaultTokens.fontSizeTextSmall),
    color: defaultTokens.colorTextSecondary,
  },
  selectedDatesContainer: {
    backgroundColor: defaultTokens.backgroundButtonInfo,
  },
  startOfSelectedDatesContainer: {
    borderTopStartRadius: parseFloat(defaultTokens.borderRadiusNormal),
    borderBottomStartRadius: parseFloat(defaultTokens.borderRadiusNormal),
  },
  endOfSelectedDatesContainer: {
    borderTopEndRadius: parseFloat(defaultTokens.borderRadiusNormal),
    borderBottomEndRadius: parseFloat(defaultTokens.borderRadiusNormal),
  },
  selectedDatesText: {
    color: defaultTokens.colorTextButtonPrimary,
  },
  dayInPast: {
    color: defaultTokens.colorTextSecondary,
  },
  leftArrow: {
    start: 0,
    top: 12,
    android: {
github kiwicom / margarita / apps / landingPage / components / Info / Features.js View on Github external
flex-wrap: wrap;
  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 / packages / universal-components / src / SegmentedButton / SegmentedButton.js View on Github external
first={index === 0}
        last={index === segmentsData.length - 1}
        active={value === selectedValue}
        onPress={onValueChange}
      />
    );
  });
  return ;
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    padding: parseInt(defaultTokens.spaceXXXSmall, 10),
    backgroundColor: defaultTokens.backgroundButtonSecondary,
    borderRadius: parseInt(defaultTokens.borderRadiusNormal, 10),
  },
});

export default SegmentedButton;
github kiwicom / margarita / src / SegmentedButton / SegmentedButton.js View on Github external
first={index === 0}
        last={index === segmentsData.length - 1}
        active={value === selectedValue}
        onPress={onValueChange}
      />
    );
  });
  return ;
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    padding: parseInt(defaultTokens.spaceXXXSmall, 10),
    backgroundColor: defaultTokens.backgroundButtonSecondary,
    borderRadius: parseInt(defaultTokens.borderRadiusNormal, 10),
  },
});

export default SegmentedButton;
github kiwicom / margarita / packages / universal-components / src / CarrierLogo / CarrierLogo.js View on Github external
};

const styles = StyleSheet.create({
  wrapper: {
    display: 'flex',
    flexWrap: 'wrap',
    flexDirection: 'column',
    justifyContent: 'space-between',
    backgroundColor: defaultTokens.backgroundCarrierLogo,
  },
  wrapperSpaceBetween: {
    alignContent: 'space-between',
  },
  logo: {
    backgroundColor: defaultTokens.backgroundCarrierLogo,
    borderRadius: parseFloat(defaultTokens.borderRadiusNormal),
  },
  logoFlexEnd: {
    alignSelf: 'flex-end',
  },
});

const sizeStyles = StyleSheet.create(logoSizes);
github kiwicom / margarita / apps / core / components / ItineraryCard / TimelineArrow.js View on Github external
zIndex: parseFloat(defaultTokens.zIndexModal),
  },
  arrow: {
    width: 7,
    height: 7,
    position: 'relative',
  },
  arrowHalf: {
    position: 'absolute',
    backgroundColor: defaultTokens.backgroundButtonSecondaryActive,
  },
  arrowLeft: {
    width: 7,
    height: 2,
    backgroundColor: defaultTokens.paletteInkLighter,
    borderBottomStartRadius: parseFloat(defaultTokens.borderRadiusNormal),
    borderTopStartRadius: parseFloat(defaultTokens.borderRadiusNormal),
    position: 'absolute',
    bottom: 0,
  },
  arrowRight: {
    height: 7,
    width: 2,
    backgroundColor: defaultTokens.paletteInkLighter,
    borderTopStartRadius: parseFloat(defaultTokens.borderRadiusNormal),
    borderTopEndRadius: parseFloat(defaultTokens.borderRadiusNormal),
    end: 0,
    position: 'absolute',
  },
  upperArrowContainer: { marginTop: -4 },
  lowerArrowContainer: { marginTop: 4 },
  invisibleArrow: { backgroundColor: defaultTokens.backgroundCard },
github kiwicom / margarita / src / RowOption / RowOptionRightButton.js View on Github external
style={styles.plusButton}
      testID="add-button"
    >
      
    
  );
}

const styles = StyleSheet.create({
  plusButton: {
    backgroundColor: defaultTokens.backgroundAlertSuccess,
    borderRadius: parseFloat(defaultTokens.borderRadiusNormal),
    marginEnd: 10,
    padding: 2,
  },
});