How to use @kiwicom/orbit-design-tokens - 10 common examples

}

ModalButtons.defaultProps = {
  labelConfirm: 'OK',
  labelCancel: 'Cancel',
};

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
  },
  buttonWrapper: {
    flex: 1,
    ios: {
      // @TODO bottom margin needs to be currently set for iOS because of the persisting bug related to `SafeAreaView` and `Modal` on iPhone X https://github.com/facebook/react-native/issues/18177
      marginBottom: parseFloat(defaultTokens.spaceMedium),
    },
  },
  confirmButton: {
    marginStart: parseFloat(defaultTokens.spaceXSmall),
  },
});

// @flow

import styled from 'styled-components';
import { defaultTokens } from '@kiwicom/orbit-design-tokens';

export default styled.div`
  background-color: ${({ disabled }) =>
    disabled ? `#9D9D9D` : defaultTokens.paletteProductLight};
  color: ${defaultTokens.paletteProductNormal};
  display: inline-block;
  padding: 3px 7px;
`;

// @flow

import { defaultTokens } from '@kiwicom/orbit-design-tokens';

import {
  textColor as sharedTextColor,
  wrapperColor as sharedWrapperColor,
} from './shared';

export const textColor = {
  ...sharedTextColor,
  info: defaultTokens.paletteBlueNormal,
  success: defaultTokens.paletteProductNormal,
};

export const wrapperColor = {
  ...sharedWrapperColor,
  info: defaultTokens.paletteBlueLight,
  success: defaultTokens.paletteProductLight,
};

selectedValue={selectedValue}
          style={styles.picker}
          onValueChange={onValueChange}
        />
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
    height: parseInt(defaultTokens.heightInputNormal, 10),
    borderRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    backgroundColor: defaultTokens.backgroundButtonSecondary,
  },
  label: {
    flex: 1,
    color: defaultTokens.colorTextAttention,
    paddingLeft: parseInt(defaultTokens.spaceSmall, 10),
  },
  icon: {
    marginRight: 10,
  },
  picker: {
    position: 'absolute',
    left: 0,
    width: '100%',
    opacity: 0, // NOTE: This workaround is required because picker label cannot be currently styled on Android
    height: parseInt(defaultTokens.heightInputNormal, 10),

}) => {
  if (disabled) {
    return null;
  }
  if (state === BUTTON_STATES.ACTIVE && !transparent) {
    return css`
      box-shadow: inset 0 0 6px 3px ${convertHexToRgba(theme.orbit.paletteInkNormal, 8)};
      // TODO: token
    `;
  }
  if (state === BUTTON_STATES.FOCUS) {
    return css`
      ${!transparent &&
        css`
          &:active {
            box-shadow: inset 0 0 6px 3px ${convertHexToRgba(theme.orbit.paletteInkNormal, 8)};
          }
        `};
    `;
  }
  return null;
};
export default getButtonLinkBoxShadow;

);
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
    height: parseInt(defaultTokens.heightInputNormal, 10),
    borderRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    backgroundColor: defaultTokens.backgroundButtonSecondary,
  },
  label: {
    flex: 1,
    color: defaultTokens.colorTextAttention,
    paddingLeft: parseInt(defaultTokens.spaceSmall, 10),
  },
  icon: {
    marginRight: 10,
  },
  picker: {
    position: 'absolute',
    left: 0,
    width: '100%',
    opacity: 0, // NOTE: This workaround is required because picker label cannot be currently styled on Android
    height: parseInt(defaultTokens.heightInputNormal, 10),
  },
});

export default Picker;

// @flow

import { defaultTokens } from '@kiwicom/orbit-design-tokens';

export const textColor = {
  primary: defaultTokens.colorTextButtonPrimary,
  secondary: defaultTokens.colorTextButtonSecondary,
  warning: defaultTokens.colorTextButtonWarning,
  critical: defaultTokens.colorTextButtonCritical,
  facebook: defaultTokens.colorTextButtonFacebook,
  google: defaultTokens.colorTextButtonGoogle,
};

export const wrapperColor = {
  primary: defaultTokens.backgroundButtonPrimary,
  secondary: defaultTokens.backgroundButtonSecondary,
  warning: defaultTokens.backgroundButtonWarning,
  critical: defaultTokens.backgroundButtonCritical,
  facebook: defaultTokens.backgroundButtonFacebook,
  google: defaultTokens.backgroundButtonGoogle,
};

export const size = {
  small: {
    height: parseInt(defaultTokens.heightButtonSmall, 10),
    fontSize: parseInt(defaultTokens.fontSizeButtonSmall, 10),
    padding: parseInt(defaultTokens.spaceSmall, 10),
    paddingWithIcon: parseInt(defaultTokens.spaceXSmall, 10),
  },
  normal: {
    height: parseInt(defaultTokens.heightButtonNormal, 10),
    fontSize: parseInt(defaultTokens.fontSizeButtonNormal, 10),

style={styles.picker}
          onValueChange={onValueChange}
        />
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
    height: parseInt(defaultTokens.heightInputNormal, 10),
    borderRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    backgroundColor: defaultTokens.backgroundButtonSecondary,
  },
  label: {
    flex: 1,
    color: defaultTokens.colorTextAttention,
    paddingLeft: parseInt(defaultTokens.spaceSmall, 10),
  },
  icon: {
    marginRight: 10,
  },
  picker: {
    position: 'absolute',
    left: 0,
    width: '100%',
    opacity: 0, // NOTE: This workaround is required because picker label cannot be currently styled on Android
    height: parseInt(defaultTokens.heightInputNormal, 10),
  },

type LocalizedPriceProps = {|
  +localizedPrice: string,
  +style?: StylePropType,
|};

export default function LocalizedPrice({
  localizedPrice,
  style,
}: LocalizedPriceProps) {
  return ;
}
const styles = StyleSheet.create({
  price: {
    fontWeight: 'bold',
    color: defaultTokens.colorTextLinkPrimary,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    web: {
      color: '#2e353b', // // @TODO repeating value - should be added to design-tokens
      fontSize: 18,
    },
  },
});

);
  }
}

const styles = StyleSheet.create({
  line: {
    flexDirection: 'row',
    height: parseInt(defaultTokens.heightInputNormal, 10),
  },
  icon: {
    paddingHorizontal: parseInt(defaultTokens.spaceSmall, 10),
    justifyContent: 'center',
  },
  counter: {
    flex: 1,
    paddingEnd: parseInt(defaultTokens.spaceSmall, 10),
    flexDirection: 'row',
    alignItems: 'center',
  },
  counterUnderline: {
    borderBottomColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  label: {
    flex: 1,
    fontSize: parseInt(defaultTokens.fontSizeTextLarge, 10),
    color: defaultTokens.colorTextAttention,
  },
  stepperNumber: {
    width: parseInt(defaultTokens.spaceXXXLarge, 10),
    textAlign: 'center',
    fontSize: parseInt(defaultTokens.fontSizeTextNormal, 10),