How to use the @kiwicom/orbit-design-tokens.defaultTokens.paletteInkDark 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 / Accordion / Accordion.js View on Github external
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 / src / SearchParamsSummary / SearchParamsSummary.js View on Github external
)}
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    height: 64,
    borderBottomWidth: 1,
    borderBottomColor: defaultTokens.paletteInkLighter,
  },
  connector: {
    color: defaultTokens.paletteInkDark,
  },
  citiesContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 3,
    paddingTop: 8,
  },
  headerLeftcontainer: {
    flexDirection: 'column',
    paddingStart: 16,
  },
  departureCity: {
    fontWeight: 'bold',
    marginEnd: 5,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
github kiwicom / orbit-components / src / Icon / IconList.js View on Github external
align-content: center;
  width: 100%;
  min-height: 80px;
  background-color: white;
  margin-bottom: ${defaultTokens.spaceLarge};
  border-radius: ${defaultTokens.borderRadiusLarge};
  border: ${defaultTokens.borderWidthCard} ${defaultTokens.borderStyleCard}
    ${defaultTokens.paletteCloudNormal};
  padding-right: ${defaultTokens.spaceLarge};
`;

const IconImport = styled.div`
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 12px;
  line-height: ${defaultTokens.lineHeightText};
  color: ${defaultTokens.paletteInkDark};
  background-color: ${defaultTokens.paletteCloudLight};
  border: ${defaultTokens.borderWidthCard} ${defaultTokens.borderStyleCard}
    ${defaultTokens.paletteCloudNormal};
  padding: ${defaultTokens.spaceXXSmall} ${defaultTokens.spaceXSmall};
`;

const IconList = () => (
  
    {Object.keys(Icons).map(icon => {
      const Icon = styled(Icons[icon])`
        padding: 0 ${defaultTokens.spaceLarge};
        flex-shrink: 0;
      `;
      const iconName = `${icon}`;
      return (
github kiwicom / margarita / packages / components / src / timelineInformation / TimelineInformation.js View on Github external
render() {
    const { icon, information, warning, containerStyle } = this.props;
    const iconWithStyle = React.cloneElement(icon, {
      size: 'small',
      color: icon.props.color || defaultTokens.paletteInkDark,
    });

    const informationWithStyle = React.cloneElement(information, {
      size: 'normal',
      numberOfLines: 1,
    });

    let warningWithStyle = null;
    if (warning) {
      warningWithStyle = React.cloneElement(warning, {
        size: 'small',
        numberOfLines: 1,
        align: 'right',
      });
    }
github kiwicom / margarita / apps / landingPage / components / Title.js View on Github external
color: ${({ light }) =>
    light ? defaultTokens.paletteWhite : defaultTokens.paletteInkDark};
  padding: 60px 0 20px 0;
github kiwicom / margarita / src / TagsInput / TagsInput.js View on Github external
flexGrow: 1,
  },
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 9,
    paddingHorizontal: 8,
  },
  fieldContainer: {
    flexDirection: 'row',
    flex: 1,
    marginStart: 4,
    overflow: 'hidden',
  },
  label: {
    color: defaultTokens.paletteInkDark,
    lineHeight: 16,
  },
  opacityZero: {
    opacity: 0,
  },
  opacityOne: {
    opacity: 1,
  },
});
github kiwicom / margarita / apps / core / scenes / bookings / BookingBadges.js View on Github external
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  confirmed: {
    backgroundColor: defaultTokens.backgroundButtonSuccess,
  },
  closed: {
    backgroundColor: defaultTokens.paletteRedNormal,
  },
  refunded: {
    backgroundColor: defaultTokens.paletteOrangeNormal,
  },
  id: {
    backgroundColor: defaultTokens.paletteInkDark,
  },
  badge: {
    opacity: 0.9,
  },
});

export default createFragmentContainer(BookingBadges, {
  data: graphql`
    fragment BookingBadges_data on BookingInterface {
      id(opaque: false)
      status
    }
  `,
});
github kiwicom / margarita / packages / universal-components / src / TagsInput / TagsInput.js View on Github external
flexDirection: 'row',
    justifyContent: 'space-between',
    padding: parseFloat(defaultTokens.spaceXSmall),
  },
  container: {
    alignItems: 'center',
    flexDirection: 'row',
    paddingHorizontal: parseFloat(defaultTokens.spaceXSmall),
    borderRadius: 3,
  },
  fieldContainer: {
    flexDirection: 'row',
    flex: 1,
  },
  label: {
    color: defaultTokens.paletteInkDark,
    lineHeight: 16,
  },
  opacityZero: {
    opacity: 0,
  },
  opacityOne: {
    opacity: 1,
  },
  row: {
    flex: 1,
    flexDirection: 'column',
  },
  inputFieldContainer: {
    paddingVertical: parseFloat(defaultTokens.spaceXSmall),
    height: 50,
  },
github kiwicom / margarita / packages / components / src / passengersButton / PassengersButton.native.js View on Github external
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: 122,
    height: parseInt(defaultTokens.heightButtonNormal, 10),
    paddingStart: 11,
    paddingEnd: parseInt(defaultTokens.spaceMedium, 10),
    backgroundColor: defaultTokens.backgroundButtonSecondary,
    borderRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
  },
  text: {
    color: defaultTokens.paletteInkDark,
    fontSize: parseInt(defaultTokens.fontSizeButtonLarge, 10),
  },
});
github kiwicom / margarita / apps / core / components / passengerForm / baggageBundles / BaggageBundle.js View on Github external
}

const borderWidth = 0.5;
const checkedBorderWidth = 2;
const borderWidthDiff = checkedBorderWidth - borderWidth;

const styles = StyleSheet.create({
  container: {
    padding: parseFloat(defaultTokens.spaceXSmall),
    marginTop: parseFloat(defaultTokens.spaceSmall),
    marginBottom: parseFloat(defaultTokens.spaceXXXSmall),
    backgroundColor: defaultTokens.paletteWhite,
    borderWidth,
    borderColor: defaultTokens.borderColorTableCell,
    borderRadius: 4,
    shadowColor: defaultTokens.paletteInkDark,
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.3,
    shadowRadius: 4,
  },
  containerChecked: {
    borderColor: defaultTokens.borderColorButtonPrimaryBordered,
    borderWidth: checkedBorderWidth,
    padding: parseFloat(defaultTokens.spaceXSmall) - borderWidthDiff,
  },
  row: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',