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

height: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    paddingVertical: 4,
    fontWeight: designTokens.fontWeightMedium,
    color: defaultTokens.colorTextPrimary,
    fontSize: 12,
    lineHeight: 15,
  },
  activeButton: {
    backgroundColor: defaultTokens.paletteInkNormal,
  },
  activeButtonText: {
    color: defaultTokens.paletteCloudNormal,
  },
  icon: {
    paddingEnd: 5,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
});

marginEnd: 5,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    color: defaultTokens.colorTextAttention,
  },
  arrivalCity: {
    fontWeight: 'bold',
    marginStart: 5,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    color: defaultTokens.colorTextAttention,
  },
  badgeText: {
    fontSize: parseFloat(defaultTokens.fontSizeTextSmall),
    color: defaultTokens.colorTextPrimary,
  },
  badge: {
    backgroundColor: defaultTokens.paletteCloudNormal,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
});

padding: 10,
    android: {
      marginHorizontal: 8,
      elevation: 1,
      borderRadius: 3,
      overflow: 'hidden',
    },
    web: {
      marginHorizontal: 8,
      borderRadius: 8,
      overflow: 'hidden',
    },
    ios: {
      borderTopWidth: StyleSheet.hairlineWidth,
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderColor: defaultTokens.paletteCloudNormal,
    },
  },
});

paddingStart: 40,
    },
    alignItems: Platform.OS === 'web' ? 'center' : 'stretch',
    flex: 1,
  },
  city: {
    marginEnd: 5,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    color: defaultTokens.colorTextAttention,
  },
  badgeText: {
    fontSize: parseFloat(defaultTokens.fontSizeTextSmall),
    color: defaultTokens.colorTextPrimary,
  },
  badge: {
    backgroundColor: defaultTokens.paletteCloudNormal,
    alignSelf: 'center',
  },
  date: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingBottom: 8,
  },
  gradientOverlap: {
    position: 'absolute',
    top: 0,
    end: 0,
    height: headerHeight - 1,
    zIndex: parseFloat(defaultTokens.zIndexDefault),
  },
});

if (touchable) {
    return {inner};
  }

  return inner;
}

const styles = StyleSheet.create({
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 28,
    height: 28,
    borderRadius: 6,
    backgroundColor: defaultTokens.paletteCloudNormal,
  },
  buttonDisabled: {
    opacity: parseFloat(defaultTokens.opacityButtonDisabled),
  },
});

height: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    paddingVertical: 4,
    fontWeight: '500',
    color: defaultTokens.colorTextPrimary,
    fontSize: 12,
    lineHeight: 15,
  },
  activeButton: {
    backgroundColor: defaultTokens.paletteInkNormal,
  },
  activeButtonText: {
    color: defaultTokens.paletteCloudNormal,
  },
  icon: {
    paddingEnd: 5,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
});

onPress={onPress}
      style={[styles.button, isActive && styles.activeButton]}
    >
      
    
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: defaultTokens.paletteCloudNormal,
    borderRadius: 2,
    paddingHorizontal: 8,
    marginEnd: 8,
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    paddingVertical: 4,
    fontWeight: designTokens.fontWeightMedium,
    color: defaultTokens.colorTextPrimary,
    fontSize: 12,
    lineHeight: 15,
  },
  activeButton: {
    backgroundColor: defaultTokens.paletteInkNormal,

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 (
        
          
          
            {`import ${iconName} from "@kiwicom/orbit-components/lib/icons/${iconName}"`}

export default function FilterButton({
  title,
  isActive,
  onPress,
  icon,
}: Props) {
  const filterIcon =
    icon == null
      ? null
      : React.cloneElement(icon, {
          color: isActive
            ? defaultTokens.paletteCloudNormal
            : defaultTokens.colorIconPrimary,
          size: 'medium',
        });

  return (

onPress={onPress}
      style={[styles.button, isActive && styles.activeButton]}
    >
      
    
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: defaultTokens.paletteCloudNormal,
    borderRadius: 2,
    paddingHorizontal: 8,
    marginEnd: 8,
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    paddingVertical: 4,
    fontWeight: '500',
    color: defaultTokens.colorTextPrimary,
    fontSize: 12,
    lineHeight: 15,
  },
  activeButton: {
    backgroundColor: defaultTokens.paletteInkNormal,