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

const styles = StyleSheet.create({
  container: {
    marginTop: parseFloat(defaultTokens.marginTopFormFeedback),
    marginStart: parseFloat(defaultTokens.spaceSmall),
  },
  message: {
    fontSize: parseFloat(defaultTokens.fontSizeFormFeedback),
  },
  default: {
    fontWeight: '400',
    color: defaultTokens.colorTextSecondary,
  },
  error: {
    fontWeight: designTokens.fontWeightMedium,
    color: defaultTokens.colorTextError,
  },
});
github kiwicom / margarita / apps / core / components / sectorDetail / LayoverInfo.js View on Github external
paddingStart: parseInt(defaultTokens.spaceLarge, 10),
    paddingVertical: parseInt(defaultTokens.spaceMedium, 10),
    flexDirection: 'row',
    borderColor: defaultTokens.paletteInkLighter,
    borderStartWidth: 2,
    alignItems: 'center',
    web: {
      borderStyle: 'dotted',
    },
  },
  icon: {
    marginEnd: parseInt(defaultTokens.spaceXSmall, 10),
  },
  text: {
    fontSize: parseInt(defaultTokens.fontSizeTextSmall, 10),
    color: defaultTokens.colorTextSecondary,
  },
});
github kiwicom / margarita / packages / components / src / duration / Duration.js View on Github external
);
}

Duration.defaultProps = {
  showIcon: true,
};

const styleSheet = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  durationText: {
    fontSize: 12,
    color: defaultTokens.colorTextSecondary,
  },
});
github kiwicom / margarita / src / ConnectionCard / TripSector.js View on Github external
paddingHorizontal: 10,
  },
  places: {
    flex: 1,
  },
  text: {
    fontSize: parseFloat(defaultTokens.fontSizeTextSmall),
    lineHeight: 17,
    paddingHorizontal: 5,
    paddingVertical: 5,
  },
  infoItems: {
    alignItems: 'flex-end',
  },
  info: {
    color: defaultTokens.colorTextSecondary,
  },
  timeline: {},
});
github kiwicom / margarita / packages / components / src / duration / Duration.js View on Github external
export default function Duration(props: Props) {
  const { hours, minutes } = separateHours(props.duration || 0);
  const duration = `${hours}h ${minutes}m`;
  return (
    
  );
}
github kiwicom / margarita / packages / universal-components / src / TagsInput / components / DeleteButton.js View on Github external
name="close"
            color={defaultTokens.colorIconSecondary}
            size="small"
          />
        
      
    );
  }
}

const styles = StyleSheet.create({
  buttonContainer: {
    flexDirection: 'row',
  },
  text: {
    color: defaultTokens.colorTextSecondary,
    marginEnd: parseFloat(defaultTokens.spaceXXXSmall),
  },
});
github kiwicom / margarita / packages / components / src / tripInput / TripInput.js View on Github external
borderRadius: 3,
      backgroundColor: defaultTokens.paletteWhite,
      borderWidth: 1,
      borderColor: defaultTokens.paletteInkLighter,
    },
  },
  warningContainer: {
    borderColor: defaultTokens.paletteRedNormal,
  },
  icon: {
    marginEnd: 10,
  },
  label: {
    color: defaultTokens.paletteInkNormal,
    web: {
      color: defaultTokens.colorTextSecondary,
    },
  },
  value: {
    color: defaultTokens.colorTextAttention,
    web: {
      color: defaultTokens.paletteInkNormal,
      fontWeight: designTokens.fontWeightMedium,
    },
  },
});
github kiwicom / margarita / apps / core / components / sectorDetail / SectorStopoverDuration.js View on Github external
);
  }

  return null;
};

const styles = StyleSheet.create({
  text: {
    fontSize: parseInt(defaultTokens.fontSizeTextSmall, 10),
    color: defaultTokens.colorTextSecondary,
    marginTop: parseInt(defaultTokens.spaceSmall, 10),
    marginBottom: parseInt(defaultTokens.spaceMedium, 10),
    marginStart: 48,
  },
});

export default createFragmentContainer(SectorStopoverDuration, {
  data: graphql`
    fragment SectorStopoverDuration_data on Sector {
      stopoverDuration
      departure {
        stop {
          city {
            name
          }
        }
github kiwicom / margarita / apps / core / components / sectorDetail / segment / SegmentStopInfoRow.js View on Github external
justifyContent: 'space-between',
    alignItems: 'center',
    paddingStart: 19,
  },
  infoText: {
    fontSize: parseInt(defaultTokens.fontSizeTextNormal, 10),
    color: defaultTokens.colorTextPrimary,
  },
  infoTextThick: {
    web: {
      fontWeight: designTokens.fontWeightMedium,
    },
  },
  infoLabel: {
    fontSize: parseInt(defaultTokens.fontSizeTextSmall, 10),
    color: defaultTokens.colorTextSecondary,
  },
});
github kiwicom / margarita / packages / components / src / table / TableRow.js View on Github external
) : (
    
  );
};

const styles = StyleSheet.create({
  container: {
    marginVertical: parseFloat(defaultTokens.spaceXXSmall),
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  text: {
    color: defaultTokens.colorTextSecondary,
    fontSize: parseFloat(defaultTokens.fontSizeTextNormal),
  },
  value: {
    color: defaultTokens.colorTextAttention,
  },
});
export default TableRow;